Visualize extension loading (#1635)

* Visualize extension loading

Signed-off-by: Panu Horsmalahti <phorsmalahti@mirantis.com>

src/renderer/bootstrap.tsx

@@ -3,19 +3,20 @@ import "./components/app.scss";
 import React from "react";
 import * as Mobx from "mobx";
 import * as MobxReact from "mobx-react";
-import * as LensExtensions from "../extensions/extension-api";
-import { App } from "./components/app";
-import { LensApp } from "./lens-app";
 import { render, unmountComponentAtNode } from "react-dom";
-import { isMac } from "../common/vars";
-import { userStore } from "../common/user-store";
-import { workspaceStore } from "../common/workspace-store";
 import { clusterStore } from "../common/cluster-store";
-import { i18nStore } from "./i18n";
-import { themeStore } from "./theme.store";
-import { extensionsStore } from "../extensions/extensions-store";
+import { userStore } from "../common/user-store";
+import { isMac } from "../common/vars";
+import { workspaceStore } from "../common/workspace-store";
+import * as LensExtensions from "../extensions/extension-api";
+import { extensionDiscovery } from "../extensions/extension-discovery";
 import { extensionLoader } from "../extensions/extension-loader";
+import { extensionsStore } from "../extensions/extensions-store";
 import { filesystemProvisionerStore } from "../main/extension-filesystem";
+import { App } from "./components/app";
+import { i18nStore } from "./i18n";
+import { LensApp } from "./lens-app";
+import { themeStore } from "./theme.store";
 
 type AppComponent = React.ComponentType & {
   init?(): Promise<void>;
@@ -34,6 +35,7 @@ export async function bootstrap(App: AppComponent) {
   rootElem.classList.toggle("is-mac", isMac);
 
   extensionLoader.init();
+  extensionDiscovery.init();
 
   // preload common stores
   await Promise.all([

src/renderer/components/+extensions/__tests__/extensions.test.tsx

@@ -22,7 +22,8 @@ jest.mock("../../../../extensions/extension-discovery", () => ({
   ...jest.requireActual("../../../../extensions/extension-discovery"),
   extensionDiscovery: {
     localFolderPath: "/fake/path",
-    uninstallExtension: jest.fn(() => Promise.resolve())
+    uninstallExtension: jest.fn(() => Promise.resolve()),
+    isLoaded: true
   }
 }));
 
@@ -112,4 +113,17 @@ describe("Extensions", () => {
       expect(Notifications.error).not.toHaveBeenCalled();
     });
   });
+
+  it("displays spinner while extensions are loading", () => {
+    extensionDiscovery.isLoaded = false;
+    const { container } = render(<Extensions />);
+
+    expect(container.querySelector(".Spinner")).toBeInTheDocument();
+
+    extensionDiscovery.isLoaded = true;
+
+    waitFor(() => 
+      expect(container.querySelector(".Spinner")).not.toBeInTheDocument()
+    );
+  });
 });

src/renderer/components/+extensions/extensions.scss

@@ -37,6 +37,11 @@
         font-weight: bold;
       }
     }
+
+    > .spinner-wrapper {
+      display: flex;
+      justify-content: center;
+    }
   }
 
   .SearchInput {

src/renderer/components/+extensions/extensions.tsx

@@ -21,6 +21,7 @@ import { DropFileInput, Input, InputValidator, InputValidators, SearchInput } fr
 import { PageLayout } from "../layout/page-layout";
 import { SubTitle } from "../layout/sub-title";
 import { Notifications } from "../notifications";
+import { Spinner } from "../spinner/spinner";
 import { TooltipPosition } from "../tooltip";
 import { ExtensionStateStore } from "./extension-install.store";
 import "./extensions.scss";
@@ -541,7 +542,7 @@ export class Extensions extends React.Component {
               value={this.search}
               onChange={(value) => this.search = value}
             />
-            {this.renderExtensions()}
+            {extensionDiscovery.isLoaded ? this.renderExtensions() : <div className="spinner-wrapper"><Spinner/></div>}
           </div>
         </PageLayout>
       </DropFileInput>