Visualize extension loading (#1635)

* Visualize extension loading

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

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>