From 5c8e136c0bf3e469d1a07bb0baec333241995547 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Thu, 19 May 2022 12:57:55 -0500
Subject: [PATCH] poor network connection handle

---
 .../desktop/src/providers/ElectronProvider.tsx  | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/desktop/src/providers/ElectronProvider.tsx b/packages/desktop/src/providers/ElectronProvider.tsx
index cbafbe2..1822fa7 100644
--- a/packages/desktop/src/providers/ElectronProvider.tsx
+++ b/packages/desktop/src/providers/ElectronProvider.tsx
@@ -22,6 +22,16 @@ export function ElectronProvider({ children }: { children: React.ReactNode }) {
   const [desktopMode, setDesktopMode] = useState<DesktopMode>('mainApp');
   const [isWindowFocused, setIsWindowFocused] = useState<boolean>(false);
 
+  const [isOffline, setIsOffline] = useState<boolean>();
+
+  // handle network connection
+  useEffect(() => {
+    setIsOffline(!navigator.onLine);
+
+    window.addEventListener('online', () => setIsOffline(false));
+    window.addEventListener('offline', () => setIsOffline(true));
+  }, [setIsOffline]);
+
   // handle all window resizing logic
   useEffect(() => {
     // add dimensions if it's not overlay only mode
@@ -80,6 +90,13 @@ export function ElectronProvider({ children }: { children: React.ReactNode }) {
     setDesktopMode((prevMode) => (prevMode === 'mainApp' ? 'overlayOnly' : 'mainApp'));
   }, [setDesktopMode]);
 
+  if (isOffline)
+    return (
+      <div className="h-screen w-screen bg-white flex-1 flex flex-row justify-center items-center">
+        <span>{'poor network connection... :('}</span>{' '}
+      </div>
+    );
+
   return (
     <ElectronContext.Provider value={{ desktopMode, handleToggleDesktopMode, isWindowFocused }}>
       {children}