Revert "fix(sockets-server-disconnection): on reconnect force sync store to d…" (#640)

This reverts commit 6dc8b17.

Author: waleedlatif1

apps/sim/app/api/workflows/[id]/force-sync/route.ts

@@ -4,64 +4,36 @@ import { useEffect, useState } from 'react'
 
 interface ConnectionStatusProps {
   isConnected: boolean
-  isSyncing: boolean
 }
 
-export function ConnectionStatus({ isConnected, isSyncing }: ConnectionStatusProps) {
+export function ConnectionStatus({ isConnected }: ConnectionStatusProps) {
   const [showOfflineNotice, setShowOfflineNotice] = useState(false)
-  const [syncCompleted, setSyncCompleted] = useState(false)
 
   useEffect(() => {
     let timeoutId: NodeJS.Timeout
 
     if (!isConnected) {
+      // Show offline notice after 6 seconds of being disconnected
       timeoutId = setTimeout(() => {
         setShowOfflineNotice(true)
       }, 6000) // 6 seconds
-    } else if (isConnected && showOfflineNotice && !isSyncing && syncCompleted) {
+    } else {
+      // Hide notice immediately when reconnected
       setShowOfflineNotice(false)
-      setSyncCompleted(false)
     }
 
     return () => {
       if (timeoutId) {
         clearTimeout(timeoutId)
       }
     }
-  }, [isConnected, isSyncing, showOfflineNotice, syncCompleted])
-
-  // Track when sync completes
-  useEffect(() => {
-    if (!isSyncing && showOfflineNotice && isConnected) {
-      setSyncCompleted(true)
-    }
-  }, [isSyncing, showOfflineNotice, isConnected])
+  }, [isConnected])
 
   // Don't render anything if connected or if we haven't been disconnected long enough
   if (!showOfflineNotice) {
     return null
   }
 
-  // Show different states based on connection and sync status
-  if (isConnected && isSyncing) {
-    return (
-      <div className='flex items-center gap-1.5'>
-        <div className='flex items-center gap-1.5 text-yellow-600'>
-          <div className='relative flex items-center justify-center'>
-            <div className='absolute h-3 w-3 animate-ping rounded-full bg-yellow-500/20' />
-            <div className='relative h-2 w-2 rounded-full bg-yellow-500' />
-          </div>
-          <div className='flex flex-col'>
-            <span className='font-medium text-xs leading-tight'>Syncing changes</span>
-            <span className='text-xs leading-tight opacity-90'>
-              Saving local changes to database...
-            </span>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
   return (
     <div className='flex items-center gap-1.5'>
       <div className='flex items-center gap-1.5 text-red-600'>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/user-avatar-stack/components/connection-status/connection-status.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { useMemo } from 'react'
-import { useSocket } from '@/contexts/socket-context'
 import { usePresence } from '../../../../hooks/use-presence'
 import { ConnectionStatus } from './components/connection-status/connection-status'
 import { UserAvatar } from './components/user-avatar/user-avatar'
@@ -28,7 +27,6 @@ export function UserAvatarStack({
 }: UserAvatarStackProps) {
   // Use presence data if no users are provided via props
   const { users: presenceUsers, isConnected } = usePresence()
-  const { isSyncing } = useSocket()
   const users = propUsers || presenceUsers
 
   // Memoize the processed users to avoid unnecessary re-renders
@@ -47,10 +45,8 @@ export function UserAvatarStack({
   }, [users, maxVisible])
 
   // Show connection status component regardless of user count
-  // This will handle the offline notice when disconnected for 6 seconds
-  const connectionStatusElement = (
-    <ConnectionStatus isConnected={isConnected} isSyncing={isSyncing} />
-  )
+  // This will handle the offline notice when disconnected for 15 seconds
+  const connectionStatusElement = <ConnectionStatus isConnected={isConnected} />
 
   // Only show presence when there are multiple users (>1)
   // But always show connection status