fix: implement optimistic UI update for store sync toggle #85

shopcall.ai-main/src/components/IntegrationsContent.tsx

@@ -329,15 +329,30 @@ export function IntegrationsContent() {
   };
 
   const handleToggleStoreEnabled = async (storeId: string, storeName: string, currentEnabled: boolean) => {
+    const newEnabled = !currentEnabled;
+    console.log('[DEBUG] Toggle called:', { storeId, storeName, currentEnabled, newEnabled });
+
+    // Optimistic UI update - immediately update the local state
+    setConnectedShops(prev => prev.map(shop => {
+      if (shop.id === storeId) {
+        return {
+          ...shop,
+          store_sync_config: shop.store_sync_config?.map(config => ({
+            ...config,
+            enabled: newEnabled
+          })) || [{ enabled: newEnabled }]
+        };
+      }
+      return shop;
+    }));
+
     try {
-      console.log('[DEBUG] Toggle called:', { storeId, storeName, currentEnabled, newEnabled: !currentEnabled });
       const sessionData = localStorage.getItem('session_data');
       if (!sessionData) {
         throw new Error('No session data found');
       }
 
       const session = JSON.parse(sessionData);
-      const newEnabled = !currentEnabled;
 
       const response = await fetch(`${API_URL}/api/stores/${storeId}/enable`, {
         method: 'PUT',
@@ -361,10 +376,25 @@ export function IntegrationsContent() {
           : t('integrations.shopDisabledDescription', { storeName }),
       });
 
-      // Refresh stores list
+      // Refresh stores list to ensure sync with server
       fetchStores();
     } catch (error) {
       console.error('Error toggling store enabled status:', error);
+
+      // Revert the optimistic update on error
+      setConnectedShops(prev => prev.map(shop => {
+        if (shop.id === storeId) {
+          return {
+            ...shop,
+            store_sync_config: shop.store_sync_config?.map(config => ({
+              ...config,
+              enabled: currentEnabled // Revert to original value
+            })) || [{ enabled: currentEnabled }]
+          };
+        }
+        return shop;
+      }));
+
       toast({
         title: t('integrations.updateFailed'),
         description: t('integrations.updateFailedDescription'),