show loading text while waiting for page

Author: jaredly

shells/firefox/data/panel.html

@@ -23,8 +23,9 @@
                 background-color: white;
                 font-family: sans-serif;
             }
-            #container h1 {
+            #message {
                 margin: 20px auto;
+                color: #ccc;
             }
             #logs {
                 position: fixed;

shells/firefox/main/ReactPanel.js

@@ -46,6 +46,9 @@ const ReactPanel = Class({
       worker.port.on('hasReact', function (hasReact) {
         metaAddonSide.postMessage({type: 'hasReact', val: hasReact});
       });
+      worker.port.on('unload', function () {
+        metaAddonSide.postMessage('unload');
+      });
       worker.on('error', function (error) {
         console.log('More Error!!', error);
       });

shells/firefox/panel/run.js

@@ -32,11 +32,13 @@ window.addEventListener('message', function (event) {
   metaPort.onmessage = evt => {
     if (evt.data === 'show') {
       reload();
+    } else if (evt.data === 'unload') {
+      node.innerHTML = '<h1 id="message">Looking for React</h1>';
     } else if (evt.data.type === 'hasReact') {
       if (evt.data.val) {
         React.render(<Panel alreadyFoundReact={true} {...config} />, node);
       } else {
-        node.innerHTML = '<h1>No react found on page...</h1>';
+        node.innerHTML = '<h1 id="message">No react found on page...</h1>';
       }
     }
   };

shells/firefox/src/contentScript.js

@@ -22,6 +22,10 @@ if (Object.keys(unsafeWindow.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers).length)
   self.port.emit('hasReact', false);
 }
 
+window.addEventListener('beforeunload', () => {
+  self.port.emit('unload');
+});
+
 function connectToBackend() {
   self.port.on('message', function (payload) {
     window.postMessage({