Merge pull request #1286 from Immex171/feat/frontend-reliiability-optimistic-ui-retry

# Frontend Reliability Enhancements: Optimistic UI & Request Retry

Author: leojay-net

Dechat/dex_with_fiat_frontend/src/components/OfflineStatusBanner.test.tsx

@@ -0,0 +1,179 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import OfflineStatusBanner from './OfflineStatusBanner';
+import * as offlineMessageQueue from '@/lib/offlineMessageQueue';
+
+// Mock dependencies
+vi.mock('@/hooks/useOnlineStatus', () => ({
+  useOnlineStatus: vi.fn(() => ({
+    isOnline: true,
+    wasOffline: false,
+    resetWasOffline: vi.fn(),
+  })),
+}));
+
+vi.mock('@/hooks/useToast', () => ({
+  useToast: vi.fn(() => ({
+    addToast: vi.fn(),
+  })),
+}));
+
+vi.mock('@/lib/offlineStatusSchema', () => ({
+  offlineStatusToastSchema: {
+    safeParse: vi.fn(() => ({ success: true, data: {} })),
+  },
+}));
+
+vi.mock('@/lib/offlineMessageQueue', () => ({
+  subscribeToQueuedMessageCount: vi.fn(),
+  setQueuedMessageCount: vi.fn(),
+  getQueuedMessageCount: vi.fn(() => 0),
+}));
+
+describe('OfflineStatusBanner - Optimistic UI Updates', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.useRealTimers();
+  });
+
+  it('should show banner immediately when going offline', async () => {
+    const { useOnlineStatus } = await import('@/hooks/useOnlineStatus');
+    (useOnlineStatus as any).mockReturnValue({
+      isOnline: false,
+      wasOffline: false,
+      resetWasOffline: vi.fn(),
+    });
+
+    render(<OfflineStatusBanner />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('status')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText(/You are offline/i)).toBeInTheDocument();
+  });
+
+  it('should show reconnecting state when coming back online', async () => {
+    const { useOnlineStatus } = await import('@/hooks/useOnlineStatus');
+    let isOnline = false;
+    
+    (useOnlineStatus as any).mockImplementation(() => ({
+      get isOnline() { return isOnline; },
+      wasOffline: true,
+      resetWasOffline: vi.fn(),
+    }));
+
+    const { rerender } = render(<OfflineStatusBanner />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/You are offline/i)).toBeInTheDocument();
+    });
+
+    // Simulate coming back online
+    isOnline = true;
+    rerender(<OfflineStatusBanner />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Reconnecting/i)).toBeInTheDocument();
+    });
+  });
+
+  it('should display optimistic pending count', async () => {
+    const { useOnlineStatus } = await import('@/hooks/useOnlineStatus');
+    (useOnlineStatus as any).mockReturnValue({
+      isOnline: false,
+      wasOffline: false,
+      resetWasOffline: vi.fn(),
+    });
+
+    (offlineMessageQueue.getQueuedMessageCount as any).mockReturnValue(3);
+
+    render(<OfflineStatusBanner />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/3 messages waiting to send/i)).toBeInTheDocument();
+    });
+  });
+
+  it('should hide banner after reconnection delay', async () => {
+    const { useOnlineStatus } = await import('@/hooks/useOnlineStatus');
+    let isOnline = false;
+    
+    (useOnlineStatus as any).mockImplementation(() => ({
+      get isOnline() { return isOnline; },
+      wasOffline: true,
+      resetWasOffline: vi.fn(),
+    }));
+
+    const { rerender } = render(<OfflineStatusBanner />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('status')).toBeInTheDocument();
+    });
+
+    // Simulate coming back online
+    isOnline = true;
+    rerender(<OfflineStatusBanner />);
+
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    });
+  });
+
+  it('should update aria-label based on connection state', async () => {
+    const { useOnlineStatus } = await import('@/hooks/useOnlineStatus');
+    let isOnline = false;
+    
+    (useOnlineStatus as any).mockImplementation(() => ({
+      get isOnline() { return isOnline; },
+      wasOffline: true,
+      resetWasOffline: vi.fn(),
+    }));
+
+    const { rerender } = render(<OfflineStatusBanner />);
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Offline status')).toBeInTheDocument();
+    });
+
+    isOnline = true;
+    rerender(<OfflineStatusBanner />);
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Reconnecting')).toBeInTheDocument();
+    });
+  });
+
+  it('should show loading skeleton initially when online', async () => {
+    const { useOnlineStatus } = await import('@/hooks/useOnlineStatus');
+    (useOnlineStatus as any).mockReturnValue({
+      isOnline: true,
+      wasOffline: false,
+      resetWasOffline: vi.fn(),
+    });
+
+    render(<OfflineStatusBanner />);
+
+    // Should show loading skeleton initially
+    const skeleton = document.querySelector('[aria-hidden="true"]');
+    expect(skeleton).toBeInTheDocument();
+
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+
+    await waitFor(() => {
+      expect(document.querySelector('[aria-hidden="true"]')).not.toBeInTheDocument();
+    });
+  });
+});

Dechat/dex_with_fiat_frontend/src/components/OfflineStatusBanner.tsx

@@ -1,23 +1,27 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback, useRef } from 'react';
 import { AlertTriangle, WifiOff } from 'lucide-react';
 import { useOnlineStatus } from '@/hooks/useOnlineStatus';
 import { useToast } from '@/hooks/useToast';
 import { offlineStatusToastSchema } from '@/lib/offlineStatusSchema';
-import { subscribeToQueuedMessageCount } from '@/lib/offlineMessageQueue';
+import { subscribeToQueuedMessageCount, setQueuedMessageCount, getQueuedMessageCount } from '@/lib/offlineMessageQueue';
 
 /**
  * Offline Status Banner Component
  * Shows when the user loses internet connection
  * Displays accessibility-compliant live region
+ * Implements optimistic UI updates for immediate feedback
  */
 export default function OfflineStatusBanner() {
   const { isOnline, wasOffline, resetWasOffline } = useOnlineStatus();
   const { addToast } = useToast();
   const [showBanner, setShowBanner] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [pendingCount, setPendingCount] = useState(0);
+  const [optimisticPendingCount, setOptimisticPendingCount] = useState(0);
+  const [isReconnecting, setIsReconnecting] = useState(false);
+  const previousOnlineState = useRef<boolean>(true);
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -28,13 +32,33 @@ export default function OfflineStatusBanner() {
   }, []);
 
   useEffect(() => {
-    return subscribeToQueuedMessageCount(setPendingCount);
+    return subscribeToQueuedMessageCount((count) => {
+      setPendingCount(count);
+      setOptimisticPendingCount(count);
+    });
+  }, []);
+
+  // Optimistic update: increment pending count immediately when message is queued
+  const optimisticallyIncrementPending = useCallback(() => {
+    setOptimisticPendingCount((prev: number) => prev + 1);
+    setQueuedMessageCount(getQueuedMessageCount() + 1);
+  }, []);
+
+  // Optimistic update: decrement pending count immediately when message is sent
+  const optimisticallyDecrementPending = useCallback(() => {
+    setOptimisticPendingCount((prev: number) => Math.max(0, prev - 1));
+    setQueuedMessageCount(Math.max(0, getQueuedMessageCount() - 1));
   }, []);
 
   useEffect(() => {
-    if (!isOnline) {
+    // Optimistic UI: Show banner immediately when going offline
+    if (!isOnline && previousOnlineState.current) {
       setShowBanner(true);
-    } else if (wasOffline && isOnline) {
+      setIsReconnecting(false);
+    }
+    // Optimistic UI: Hide banner immediately when coming back online
+    else if (isOnline && !previousOnlineState.current) {
+      setIsReconnecting(true);
       // Show toast when coming back online
       const toastOptions = {
         message:
@@ -58,9 +82,15 @@ export default function OfflineStatusBanner() {
         addToast(errorMessage);
       }
 
-      setShowBanner(false);
-      resetWasOffline();
+      // Optimistically hide banner after short delay
+      setTimeout(() => {
+        setShowBanner(false);
+        setIsReconnecting(false);
+        resetWasOffline();
+      }, 500);
     }
+
+    previousOnlineState.current = isOnline;
   }, [isOnline, wasOffline, addToast, resetWasOffline]);
 
   if (isLoading && isOnline) {
@@ -85,20 +115,30 @@ export default function OfflineStatusBanner() {
       role="status"
       aria-live="polite"
       aria-atomic="true"
-      aria-label="Offline status"
-      className="fixed top-0 left-0 right-0 z-50 border-b-2 shadow-md bg-[var(--color-danger)] border-[color-mix(in_srgb,var(--color-danger)_80%,black)]"
+      aria-label={isReconnecting ? "Reconnecting" : "Offline status"}
+      className={`fixed top-0 left-0 right-0 z-50 border-b-2 shadow-md transition-all duration-300 ${
+        isReconnecting 
+          ? 'bg-[var(--color-success)] border-[color-mix(in_srgb,var(--color-success)_80%,black)]' 
+          : 'bg-[var(--color-danger)] border-[color-mix(in_srgb,var(--color-danger)_80%,black)]'
+      }`}
     >
       <div className="max-w-7xl mx-auto px-4 py-3 flex items-center gap-3">
         <div className="shrink-0" aria-hidden="true">
-          <WifiOff className="w-5 h-5 animate-pulse text-white" />
+          {isReconnecting ? (
+            <WifiOff className="w-5 h-5 text-white" />
+          ) : (
+            <WifiOff className="w-5 h-5 animate-pulse text-white" />
+          )}
         </div>
         <div className="flex-1">
           <p className="text-sm font-semibold text-white">
-            You are offline. Messages will be sent when you reconnect.
+            {isReconnecting 
+              ? 'Reconnecting...' 
+              : 'You are offline. Messages will be sent when you reconnect.'}
           </p>
-          {pendingCount > 0 && (
+          {optimisticPendingCount > 0 && (
             <p className="text-xs text-white/90 mt-0.5">
-              {pendingCount} message{pendingCount === 1 ? '' : 's'} waiting to
+              {optimisticPendingCount} message{optimisticPendingCount === 1 ? '' : 's'} waiting to
               send
             </p>
           )}