load time optimizations and connection stabilizer implemented

Author: EivindDelFierro

src/app/components/Loader.tsx

@@ -15,11 +15,9 @@ This file is what decides what icon (loading, checkmark, exclamation point) is d
 
 const handleResult = (result: boolean): JSX.Element =>
   result ? (
-    <CheckCircleOutlineIcon className='check'/>
-  // if result boolean is true, we display a checkmark icon
+    <CheckCircleOutlineIcon className='check'/> // if result boolean is true, we display a checkmark icon
   ) : (
-    <ErrorOutlineIcon className='fail'/>
-    // if the result boolean is false, we display a fail icon
+    <ErrorOutlineIcon className='fail'/> // if the result boolean is false, we display a fail icon
   );
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types

src/app/containers/ErrorContainer.tsx

@@ -61,10 +61,10 @@ function ErrorContainer(): JSX.Element {
 
     if (!status.contentScriptLaunched) { // if content script hasnt been launched/found, set a timer or immediately update 'loadingArray' state
 
-      if (loadingArray[0] === true) { // if loadingArray[0] is true, then that means our timeout.current is still null so we now set it to a setTimeout function that will flip loadingArray[0] to false after 1.5 seconds
+      if (loadingArray[0] === true) { // if loadingArray[0] is true, then that means our timeout.current is still null so we now set it to a setTimeout function that will flip loadingArray[0] to false after 3 seconds
         timeout.current = setTimeout(() => {
           setLoadingArray(0, false);
-        }, 1500);
+        }, 3000); // increased from 1500
       }
     } else {
       setLoadingArray(0, false) // if status.contentScriptLaunched is true, that means timeout.current !== null. This means that useEffect was triggered previously.

src/app/containers/MainContainer.tsx

@@ -45,13 +45,18 @@ function MainContainer(): JSX.Element {
     }
   };
 
-  // let port;
   useEffect(() => {
     if (port) return; // only open port once so if it exists, do not run useEffect again
 
     // chrome.runtime allows our application to retrieve our service worker (our eventual bundles/background.bundle.js after running npm run build), details about the manifest, and allows us to listen and respond to events in our application lifecycle.
     const currentPort = chrome.runtime.connect(); // we connect to our service worker
 
+    setInterval(() => { // interval to keep connection to background.js alive
+    currentPort.postMessage({
+      action: 'keepAlive' // messages sent to port to keep connection alive
+    })
+    }, 295000) // messages must happen within five minutes
+    
     // listen for a message containing snapshots from the /extension/build/background.js service worker
     currentPort.onMessage.addListener(
       // parameter message is an object with following type script properties
@@ -63,7 +68,7 @@ function MainContainer(): JSX.Element {
         const { action, payload, sourceTab } = message;
         let maxTab: number;
 
-        if (!sourceTab) { // if the sourceTab doesn't exist or is 0
+        if (!sourceTab && action !== 'keepAlive') { // if the sourceTab doesn't exist or is 0 and it is not a 'keepAlive' action
           const tabsArray: Array<string> = Object.keys(payload); // we create a tabsArray of strings composed of keys from our payload object
           const numTabsArray: number[] = tabsArray.map((tab) => Number(tab)); // we then map out our tabsArray where we convert each string into a number
 

src/backend/routers/linkFiber.ts

@@ -70,7 +70,10 @@ export default function linkFiber(mode: Status): () => Promise<void> {
     // -------------------CHECK REACT DEVTOOL INSTALLATION----------------------
     // react devtools global hook is a global object that was injected by the React Devtools content script, allows access to fiber nodes and react version
     // Obtain React Devtools Object:
-    const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    let devTools; // changed to a different version of getting hook (08/04/2023)
+    while (!devTools) {
+      devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    }
     // If React Devtools is not installed, object will be undefined.
     if (!devTools) return;
     // If React Devtools is installed, send a message to front end.

src/extension/background.js

@@ -163,12 +163,17 @@ chrome.runtime.onConnect.addListener((port) => {
 
   // On Reactime launch: make sure RT's active tab is correct
   if (portsArr.length > 0) {
-    portsArr.forEach((bg) => // go through each port object (each Reactime instance)
+    portsArr.forEach((bg) => {// go through each port object (each Reactime instance)
       bg.postMessage({  // send passed in action object as a message to the current port
         action: 'changeTab',
         payload: { tabId: activeTab.id, title: activeTab.title },
-      }),
-    );
+      })
+      setInterval(() => { // interval used to keep connection to MainContainer alive
+        bg.postMessage({
+          action: 'keepAlive' // messages sent to port to keep connection alive
+        })
+      }, 295000) // messages must happen within five minutes
+    });
   }
 
   // send tabs obj to the connected devtools as soon as connection to devtools is made
@@ -283,7 +288,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     return true;
   }
   // everytime we get a new tabId, add it to the object
-  if (isReactTimeTravel && !(tabId in tabsObj)) {
+  while (isReactTimeTravel && !(tabId in tabsObj)) { // changed if to while 8/4/2023
     tabsObj[tabId] = createTabObj(tabTitle);
   }
 

src/extension/contentScript.ts

@@ -19,6 +19,11 @@ window.addEventListener('message', (msg) => {
     // One-time request tells the background script that the tab has reloaded.
     chrome.runtime.sendMessage({ action: 'tabReload' });
     firstMessage = false;
+    setInterval(() => { // interval to keep connection to service worker connection alive
+      chrome.runtime.sendMessage({
+        action: 'keepAlive' // messages sent to port to keep connection alive
+      })
+    }, 295000) // messages must happen within five minutes
   }
 
   // After tabs object has been created from firstMessage, backend (linkFiber.ts)