Do not use window reload

Summary: Let's keep it simple, do not reload. Just show/hide the right content.

Reviewed By: antonk52

Differential Revision: D49377316

fbshipit-source-id: 9b2a47374da3e72f17e2d55c9290960b703fd43e

desktop/flipper-ui-browser/src/index.tsx

@@ -19,7 +19,6 @@ if (loadingContainer) {
 let cachedFile: {name: string; data: string} | undefined;
 let cachedDeepLinkURL: string | undefined;
 
-let once: boolean = false;
 async function start() {
   // @ts-ignore
   electronRequire = function (path: string) {
@@ -76,10 +75,6 @@ async function start() {
           window.flipperShowMessage?.('Connecting to server...');
           break;
         case FlipperServerState.CONNECTED:
-          if (once) {
-            return window.location.reload();
-          }
-          once = true;
           window.flipperHideMessage?.();
           break;
         case FlipperServerState.DISCONNECTED:

desktop/static/index.web.dev.html

@@ -143,12 +143,17 @@
           window.location.reload();
         });
 
-        function showNoConnection(reload) {
+        function toggleUI(main) {
           const root = document.getElementById('root');
-          root.remove();
-
           const troubleshoot = document.getElementById('troubleshoot');
-          troubleshoot.style.display = 'flex';
+          
+          if (main) {
+            root.style.display = 'block';
+            troubleshoot.style.display = 'none';
+          } else {
+            root.style.display = 'none';
+            troubleshoot.style.display = 'flex';
+          }
         }
 
         const params = new URL(location.href).searchParams;
@@ -208,8 +213,14 @@
             box.textContent = text;
           }
         }
+
         window.flipperShowMessage = showMessage;
-        window.flipperShowNoConnection = showNoConnection;
+        window.flipperShowNoConnection = () => {
+          toggleUI(false);
+        };
+        window.flipperHideMessage = () => {
+          toggleUI(true);
+        }
 
         // load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases)
         try {

desktop/static/index.web.html

@@ -153,12 +153,17 @@
           window.location.reload();
         });
 
-        function showNoConnection() {
+        function toggleUI(main) {
           const root = document.getElementById('root');
-          root.remove();
-
           const troubleshoot = document.getElementById('troubleshoot');
-          troubleshoot.style.display = 'flex';
+          
+          if (main) {
+            root.style.display = 'block';
+            troubleshoot.style.display = 'none';
+          } else {
+            root.style.display = 'none';
+            troubleshoot.style.display = 'flex';
+          }
         }
 
         function showMessage(text) {
@@ -178,10 +183,14 @@
           }
         }
         window.flipperShowMessage = showMessage;
-        window.flipperShowNoConnection = showNoConnection;
+        window.flipperShowNoConnection = () => {
+          toggleUI(false);
+        };
         window.flipperHideMessage = () => {
           const box = document.querySelector('.__infinity-dev-box-error');
           box.setAttribute('hidden', true);
+
+          toggleUI(true);
         }
 
         const closeButton = document.createElement('button');