fix(new-nav): env overview statuses glitch issue

libs/shared/util-web-sockets/src/lib/use-status-web-sockets/use-status-web-sockets.ts

@@ -1,11 +1,12 @@
+import { useQueryClient } from '@tanstack/react-query'
 import { type EnvironmentStatus, type EnvironmentStatusesWithStages } from 'qovery-typescript-axios'
 import {
   type ApplicationStatusDto,
   type DatabaseStatusDto,
   type ServiceStatusDto,
   type TerraformStatusDto,
 } from 'qovery-ws-typescript-axios'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { v7 as uuidv7 } from 'uuid'
 import { QOVERY_WS } from '@qovery/shared/util-node-env'
 import { useReactQueryWsSubscription } from '@qovery/state/util-queries'
@@ -32,6 +33,21 @@ export function useStatusWebSockets({
   versionId,
 }: UseStatusWebSocketsProps) {
   const [externalRequestId] = useState(() => uuidv7())
+  const queryClient = useQueryClient()
+  const wsEnabled = Boolean(organizationId) && Boolean(clusterId) && Boolean(projectId)
+
+  // NOTE: remove running status cache when the environment is changed to avoid stale data
+  // @see https://qovery.atlassian.net/browse/QOV-1886
+  useEffect(() => {
+    return () => {
+      if (environmentId) {
+        queryClient.removeQueries({
+          queryKey: queries.environments.runningStatus(environmentId).queryKey,
+          exact: true,
+        })
+      }
+    }
+  }, [environmentId, queryClient])
 
   useReactQueryWsSubscription({
     url: QOVERY_WS + '/deployment/status',
@@ -42,7 +58,7 @@ export function useStatusWebSockets({
       project: projectId,
       version: versionId,
     },
-    enabled: Boolean(organizationId) && Boolean(clusterId) && Boolean(projectId),
+    enabled: wsEnabled,
     shouldReconnect: true,
     onMessage(queryClient, message: WSDeploymentStatus) {
       if (environmentId) {
@@ -87,7 +103,7 @@ export function useStatusWebSockets({
       external_request_id: externalRequestId,
     },
     // NOTE: projectId is not required by the API but it limits WS messages when cluster handles my environments / services
-    enabled: Boolean(organizationId) && Boolean(clusterId) && Boolean(projectId),
+    enabled: wsEnabled,
     onMessage(queryClient, message: ServiceStatusDto) {
       for (const env of message.environments) {
         // TODO [To update once rust-backed will be deployed]: check against current value and update it only if it has changed (to avoid too many re-render)