fix: deployment state color mismatch when isReady is false (#1012)

Previously, when isReady was false, the component would display
the "Deploying" message but use the color of the actual state,
causing incorrect color representation (e.g., "Deploying" in red
when state was ERROR).

Now both the message and color are determined by displayedState,
ensuring they are always synchronized. When isReady is false,
both use DEPLOYING (muted gray).

Signed-off-by: Omar <omar.brbutovic@secomind.com>

Author: OmarBrbutovic

frontend/src/components/DeploymentState.tsx

@@ -127,15 +127,15 @@ const DeploymentStateComponent = ({
   state,
   isReady,
 }: DeploymentStateComponentProps) => {
+  const displayedState = isReady ? state : "DEPLOYING";
+
   return (
     <div className="d-flex align-items-center">
       <Icon
         icon={displaySpinner(state, isReady) ? "spinner" : "circle"}
-        className={`me-2 ${stateColors[state]} ${displaySpinner(state, isReady) ? "fa-spin" : ""}`}
-      />
-      <FormattedMessage
-        id={isReady ? stateMessages[state].id : stateMessages["DEPLOYING"].id}
+        className={`me-2 ${stateColors[displayedState]} ${displaySpinner(state, isReady) ? "fa-spin" : ""}`}
       />
+      <FormattedMessage id={stateMessages[displayedState].id} />
     </div>
   );
 };