refactor useEffect to boot page load times

apps/remix-ide-e2e/src/tests/pluginManager.spec.ts

@@ -17,6 +17,7 @@ module.exports = {
     browser.waitForElementVisible('*[data-id="remixIdeSidePanel"]')
       .pause(3000)
       .click('*[plugin="pluginManager"]')
+      .pause(3000)
       .waitForElementVisible('*[data-id="pluginManagerComponentPluginManager"]')
       .assert.containsText('*[data-id="sidePanelSwapitTitle"]', 'PLUGIN MANAGER')
   },

libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx

@@ -58,8 +58,6 @@ function RootView ({ pluginComponent }: RootViewProps) {
   const GetNewlyActivatedPlugins = useCallback((pluginComponent: PluginManagerComponent) => {
     // const profiles: Profile[] = JSON.parse(window.localStorage.getItem('newActivePlugins'))
     let isValid: boolean = false
-    // eslint-disable-next-line no-debugger
-    debugger
     pluginComponent.activeProfiles.forEach(profileName => {
       isValid = validActiveProfiles.some(profile => profile.name === profileName)
     })
@@ -89,11 +87,6 @@ function RootView ({ pluginComponent }: RootViewProps) {
   }, [GetNewlyActivatedPlugins, activeP, pluginComponent, pluginComponent.activePlugins, syncInactiveProfiles])
 
   useEffect(() => {
-    pluginComponent.getAndFilterPlugins(filterPlugins)
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filterPlugins])
-
-  useEffect(() => {
     if (pluginComponent.activePlugins && pluginComponent.activePlugins.length) {
       setActiveP(pluginComponent.activePlugins)
     }
@@ -114,6 +107,11 @@ function RootView ({ pluginComponent }: RootViewProps) {
     }
   }, [pluginComponent.activePlugins, pluginComponent.inactivePlugins, pluginComponent.activeProfiles, pluginComponent, validInactiveProfiles, inactiveP.length, validActiveProfiles])
 
+  useEffect(() => {
+    pluginComponent.getAndFilterPlugins(filterPlugins)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filterPlugins])
+
   // useEffect(() => {
   //   if (validInactiveProfiles && validInactiveProfiles.length &&
   //     inactiveP.length > validInactiveProfiles.length) {
@@ -142,6 +140,50 @@ function RootView ({ pluginComponent }: RootViewProps) {
 
   return (
     <Fragment>
+      <div id="pluginManager" data-id="pluginManagerComponentPluginManager">
+        <header className="form-group remixui_pluginSearch plugins-header py-3 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
+          <input
+            type="text"
+            onChange={(event) => {
+              setFilterPlugin(event.target.value.toLowerCase())
+            }}
+            className="form-control"
+            placeholder="Search"
+            data-id="pluginManagerComponentSearchInput"
+          />
+          <button onClick={openModal} className="remixui_pluginSearchButton btn bg-transparent text-dark border-0 mt-2 text-underline" data-id="pluginManagerComponentPluginSearchButton">
+            Connect to a Local Plugin
+          </button>
+        </header>
+        <section data-id="pluginManagerComponentPluginManagerSection">
+          {(activeP && activeP.length > 0) && <Fragment>
+            <ModuleHeading headingLabel="Active Modules" count={activeP.length} />
+            {activeP.map((profile) => (
+              <ActivePluginCard
+                buttonText="Deactivate"
+                key={profile.name}
+                profile={profile}
+                syncInactiveProfiles={syncInactiveProfiles}
+                pluginComponent={pluginComponent}
+              />
+            ))}
+          </Fragment>
+          }
+          {inactiveP && <Fragment>
+            <ModuleHeading headingLabel="Inactive Modules" count={inactiveP.length} />
+            {inactiveP.map((profile) => (
+              <InactivePluginCard
+                buttonText="Activate"
+                key={profile.name}
+                profile={profile}
+                pluginComponent={pluginComponent}
+              />
+            ))}
+          </Fragment>
+          }
+        </section>
+        <PermisssionsSettings pluginSettings={pluginComponent.pluginSettings}/>
+      </div>
       <form id="local-plugin-form">
         <ModalDialog
           handleHide={closeModal}
@@ -278,53 +320,8 @@ function RootView ({ pluginComponent }: RootViewProps) {
               <label className="form-check-label" htmlFor="none">None</label>
             </div>
           </div>
-
         </ModalDialog>
       </form>
-      <div id="pluginManager" data-id="pluginManagerComponentPluginManager">
-        <header className="form-group remixui_pluginSearch plugins-header py-3 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
-          <input
-            type="text"
-            onChange={(event) => {
-              setFilterPlugin(event.target.value.toLowerCase())
-            }}
-            className="form-control"
-            placeholder="Search"
-            data-id="pluginManagerComponentSearchInput"
-          />
-          <button onClick={openModal} className="remixui_pluginSearchButton btn bg-transparent text-dark border-0 mt-2 text-underline" data-id="pluginManagerComponentPluginSearchButton">
-            Connect to a Local Plugin
-          </button>
-        </header>
-        <section data-id="pluginManagerComponentPluginManagerSection">
-          {(activeP && activeP.length > 0) && <Fragment>
-            <ModuleHeading headingLabel="Active Modules" count={activeP.length} />
-            {activeP.map((profile) => (
-              <ActivePluginCard
-                buttonText="Deactivate"
-                key={profile.name}
-                profile={profile}
-                syncInactiveProfiles={syncInactiveProfiles}
-                pluginComponent={pluginComponent}
-              />
-            ))}
-          </Fragment>
-          }
-          {inactiveP && <Fragment>
-            <ModuleHeading headingLabel="Inactive Modules" count={inactiveP.length} />
-            {inactiveP.map((profile) => (
-              <InactivePluginCard
-                buttonText="Activate"
-                key={profile.name}
-                profile={profile}
-                pluginComponent={pluginComponent}
-              />
-            ))}
-          </Fragment>
-          }
-        </section>
-        <PermisssionsSettings pluginSettings={pluginComponent.pluginSettings}/>
-      </div>
     </Fragment>
   )
 }

libs/remix-ui/plugin-manager/src/pluginManagerStateMachine.ts

@@ -84,26 +84,26 @@ export async function UpdateInactivePluginList (deactivatedPlugin: Profile, plug
   return tempArray
 }
 
-export function GetNewlyActivatedPlugins (pluginComponent: PluginManagerComponent) {
-  const profiles: Profile[] = JSON.parse(window.localStorage.getItem('newActivePlugins'))
-  let isValid: boolean = false
-  // eslint-disable-next-line no-debugger
-  debugger
-  pluginComponent.activeProfiles.forEach(profileName => {
-    isValid = profiles.some(profile => profile.name === profileName)
-  })
-  if (isValid) {
-    return profiles
-  } else {
-    profiles.forEach(profile => {
-      if (!pluginComponent.activeProfiles.includes(profile.name)) {
-        RemoveActivatedPlugin(profile.name)
-      }
-    })
-    const newProfiles = JSON.parse(window.localStorage.getItem('newActivePlugins'))
-    return newProfiles
-  }
-}
+// export function GetNewlyActivatedPlugins (pluginComponent: PluginManagerComponent) {
+//   const profiles: Profile[] = JSON.parse(window.localStorage.getItem('newActivePlugins'))
+//   let isValid: boolean = false
+//   // eslint-disable-next-line no-debugger
+//   debugger
+//   pluginComponent.activeProfiles.forEach(profileName => {
+//     isValid = profiles.some(profile => profile.name === profileName)
+//   })
+//   if (isValid) {
+//     return profiles
+//   } else {
+//     profiles.forEach(profile => {
+//       if (!pluginComponent.activeProfiles.includes(profile.name)) {
+//         RemoveActivatedPlugin(profile.name)
+//       }
+//     })
+//     const newProfiles = JSON.parse(window.localStorage.getItem('newActivePlugins'))
+//     return newProfiles
+//   }
+// }
 
 async function FetchAndPersistPlugin (pluginComponent: PluginManagerComponent, newPlugin: Profile<any>, newlyActivatedPlugins: Profile<any>[]) {
   try {

package.json

@@ -72,7 +72,7 @@
     "nightwatch_local_gist": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/gist.spec.js --env=chrome",
     "nightwatch_local_workspace": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/workspace.test.js --env=chrome",
     "nightwatch_local_defaultLayout": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/defaultLayout.test.js --env=chrome",
-    "nightwatch_local_pluginManager": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/pluginManager.spec.js --env=chrome",
+    "nightwatch_local_pluginManager": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/pluginManager.spec.js --env=firefox",
     "nightwatch_local_publishContract": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/publishContract.test.js --env=chrome",
     "nightwatch_local_generalSettings": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/generalSettings.test.js --env=chrome",
     "nightwatch_local_fileExplorer": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/fileExplorer.test.js --env=chrome",