Break connection loop

Summary:
Whenever there was a connectivity error, we would show an error message and setup a retry mechanism as to refresh the page as to make it transparent for engineers to have a working workspace again.

The problem is that there are two different channels:
- HTTP server
- WS server

If the HTTP server is healthy but there is a WS error, it is not entirely correct to try to reload the page. If the error conditions for the WS remain, then we end up in a loop.

Reviewed By: passy, antonk52

Differential Revision: D49373335

fbshipit-source-id: 4e0a08fe2384860db0bf92a22edc87402d41651c

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

@@ -19,6 +19,7 @@ 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) {
@@ -75,7 +76,11 @@ async function start() {
           window.flipperShowMessage?.('Connecting to server...');
           break;
         case FlipperServerState.CONNECTED:
-          window?.flipperHideMessage?.();
+          if (once) {
+            return window.location.reload();
+          }
+          once = true;
+          window.flipperHideMessage?.();
           break;
         case FlipperServerState.DISCONNECTED:
           window?.flipperShowNoConnection?.();

desktop/static/index.web.dev.html

@@ -143,30 +143,12 @@
           window.location.reload();
         });
 
-        // Check if the server is responding & reload the page if it is.
-        // This handles the case when the device is online, but the server
-        // is offline or misbehaving.
-        async function checkNetworkAndReload() {
-          try {
-            const response = await fetch('.');
-            if (response.status >= 200 && response.status < 500) {
-              window.location.reload();
-              return;
-            }
-          } catch {
-            // Unable to connect to the server, ignore.
-          }
-          window.setTimeout(checkNetworkAndReload, 2500);
-        }
-
-        function showNoConnection() {
+        function showNoConnection(reload) {
           const root = document.getElementById('root');
           root.remove();
 
           const troubleshoot = document.getElementById('troubleshoot');
           troubleshoot.style.display = 'flex';
-
-          checkNetworkAndReload();
         }
 
         const params = new URL(location.href).searchParams;

desktop/static/index.web.html

@@ -153,30 +153,12 @@
           window.location.reload();
         });
 
-        // Check if the server is responding & reload the page if it is.
-        // This handles the case when the device is online, but the server
-        // is offline or misbehaving.
-        async function checkNetworkAndReload() {
-          try {
-            const response = await fetch('.');
-            if (response.status >= 200 && response.status < 500) {
-              window.location.reload();
-              return;
-            }
-          } catch {
-            // Unable to connect to the server, ignore.
-          }
-          window.setTimeout(checkNetworkAndReload, 2500);
-        }
-
         function showNoConnection() {
           const root = document.getElementById('root');
           root.remove();
 
           const troubleshoot = document.getElementById('troubleshoot');
           troubleshoot.style.display = 'flex';
-
-          checkNetworkAndReload();
         }
 
         function showMessage(text) {