Fix Loading page

Summary:
The existing loading page was not behaving the way it was intended. The previous implementation triggered a page reload which made the whole retry mechanism useless.

Instead, a new endpoint was defined to expose whether the server is ready or not. Use this instead as a way of knowing whether we are good to reload the page.

Reviewed By: passy

Differential Revision: D49314749

fbshipit-source-id: eb67765d7deab8610fa5d31e710070da43a18c1c

desktop/flipper-server-core/src/server/startServer.tsx

@@ -128,6 +128,11 @@ async function startHTTPServer(config: Config): Promise<{
     });
   });
 
+  app.get('/ready', (_req, res) => {
+    res.setHeader('Content-Type', 'application/json');
+    res.end(JSON.stringify({isReady}));
+  });
+
   app.get('/health', (_req, res) => {
     res.end('flipper-ok');
   });

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

@@ -41,7 +41,10 @@ async function start() {
     token = manifest.token;
   }
 
-  console.info('Token is available: ' + token !== undefined && token?.length);
+  console.info(
+    '[flipper-client][ui-browser] Token is available: ',
+    token?.length,
+  );
 
   const openPlugin = params.get('open-plugin');
   if (openPlugin) {

desktop/static/loading.html

@@ -52,10 +52,14 @@
     // the actual entry point instead of this page.
     async function checkAndReload() {
       try {
-        const response = await fetch('.');
-        if (response.status >= 200 && response.status < 500) {
-          window.location.reload();
-          return;
+        const response = await fetch('/ready');
+        if (response.status >= 200 && response.status < 300) {
+          const data = await response.text();
+          const {isReady} = JSON.parse(data);
+          if (isReady) {
+            window.location.reload();
+            return;
+          }
         }
       } catch {
       }