forbidals

Back Back Up Advanced Editor

'use client';

import { ReactNode } from 'react';
import { useOnlineStatus } from '@/components/hooks/useOnlineStatus';
import NoInternet from '@/components/shared/common/NoInternet';

interface OnlineStatusProviderProps {
  children: ReactNode;
}

/**
 * OnlineStatusProvider Component
 *
 * This provider wraps the application and monitors internet connectivity.
 * When the user goes offline, it displays a full-screen "No Internet" page.
 * When connection is restored, the page automatically dismisses.
 *
 * Usage:
 * Wrap your app or specific routes with this provider in the layout.
 */
export default function OnlineStatusProvider({
  children,
}: OnlineStatusProviderProps) {
  // Get current online status and mount state
  // isMounted prevents hydration mismatch by ensuring
  // server and client render the same initial HTML
  const { isOnline, isMounted } = useOnlineStatus();

// Determine if we should show the offline overlay
  // Only show after mounting to prevent hydration mismatch
  const showOfflineOverlay = isMounted && !isOnline;

return (
    <>
      {/* Show No Internet overlay when offline (after mount) */}
      {/* This prevents hydration mismatch since server always sees isMounted=false */}
      {/* NoInternet is a fixed full-screen overlay, so it won't affect layout */}
      {showOfflineOverlay && <NoInternet />}

{/* Render children directly without wrapper to avoid layout issues */}
      {/* NoInternet overlay will appear on top when needed */}
      {children}
    </>
  );
}