From f1c88a464b2c1006212e339a3e8e4ab0a0ba25a5 Mon Sep 17 00:00:00 2001
From: Lorenzo Blasa <lblasa@meta.com>
Date: Mon, 18 Sep 2023 12:03:09 -0700
Subject: [PATCH] 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 |  5 -----
 desktop/static/index.web.dev.html        | 21 ++++++++++++++++-----
 desktop/static/index.web.html            | 19 ++++++++++++++-----
 3 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/desktop/flipper-ui-browser/src/index.tsx b/desktop/flipper-ui-browser/src/index.tsx
index 0dc0d8484..237170b86 100644
--- a/desktop/flipper-ui-browser/src/index.tsx
+++ b/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:
diff --git a/desktop/static/index.web.dev.html b/desktop/static/index.web.dev.html
index 1dc57902e..fb52ab9e0 100644
--- a/desktop/static/index.web.dev.html
+++ b/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 {
diff --git a/desktop/static/index.web.html b/desktop/static/index.web.html
index bc1720ea1..8e6cac557 100644
--- a/desktop/static/index.web.html
+++ b/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');