Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
waleedlatif1 merged 1 commit into from
Jul 9, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
175 changes: 0 additions & 175 deletions apps/sim/app/api/workflows/[id]/force-sync/route.ts
View file
Open in desktop

This file was deleted.

38 changes: 5 additions & 33 deletions ...ntrol-bar/components/user-avatar-stack/components/connection-status/connection-status.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'>
Expand Down
8 changes: 2 additions & 6 deletions .../w/[workflowId]/components/control-bar/components/user-avatar-stack/user-avatar-stack.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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
Expand All @@ -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
Expand Down
Loading