Adding a extensions placeholder

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

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

@@ -26,6 +26,10 @@
   .contentRegion {
     .content {
       max-width: 740px;
+
+      > section {
+        height: 100%;
+      }
     }
   }
 }

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

@@ -589,6 +589,8 @@ export class Extensions extends React.Component {
   }
 
   render() {
+    const extensions = Array.from(ExtensionLoader.getInstance().userExtensions.values());
+
     return (
       <DropFileInput onDropFiles={installOnDrop}>
         <PageLayout showOnTop className="Extensions" contentGaps={false}>
@@ -605,10 +607,10 @@ export class Extensions extends React.Component {
               installPath={this.installPath}
             />
 
-            <hr/>
+            {extensions.length && <hr/>}
 
             <InstalledExtensions
-              extensions={Array.from(ExtensionLoader.getInstance().userExtensions.values())}
+              extensions={extensions}
               uninstall={confirmUninstallExtension}
             />
           </section>

src/renderer/components/+extensions/installed-extensions.module.css

@@ -14,3 +14,8 @@
 .title {
   margin-bottom: 0!important;
 }
+
+.noItemsIcon {
+  @apply opacity-10;
+  --size: 180px;
+}

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

@@ -1,7 +1,6 @@
 import styles from "./installed-extensions.module.css";
 import React, { useMemo } from "react";
 import { ExtensionDiscovery, InstalledExtension } from "../../../extensions/extension-discovery";
-import { ExtensionLoader } from "../../../extensions/extension-loader";
 import { Icon } from "../icon";
 import { List } from "../list/list";
 import { MenuActions, MenuItem } from "../menu";
@@ -20,12 +19,19 @@ function getStatus(isEnabled: boolean) {
 
 export function InstalledExtensions({ extensions, uninstall }: Props) {
   if (!ExtensionDiscovery.getInstance().isLoaded) {
-    return <div><Spinner /></div>;
+    return <div><Spinner center /></div>;
   }
 
-  if (ExtensionLoader.getInstance().userExtensions.size == 0) {
+  if (extensions.length != 0) {
-    // TODO: Add placeholder
+    return (
-    return <div>No extensions</div>;
+      <div className="flex column h-full items-center justify-center">
+        <Icon material="extension" className={styles.noItemsIcon}/>
+        <h3 className="font-medium text-3xl mt-5 mb-2">
+          There are no extensions installed.
+        </h3>
+        <p>Please use the form above to install or drag tarbar-file here.</p>
+      </div>
+    );
   }
 
   const filters = [