From 175add91fc1da88a61ff5c132b947aebd178e4e4 Mon Sep 17 00:00:00 2001
From: Janne Savolainen <janne.savolainen@live.fi>
Date: Mon, 31 Jan 2022 11:25:36 +0200
Subject: [PATCH] Replace setup-time asynchronicity with spinner when actually
 showing the data

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
---
 .../create-resource-templates.injectable.ts        |  7 ++++---
 .../create-resource/lens-templates.injectable.ts   | 14 +++++++-------
 .../components/dock/create-resource/view.tsx       |  7 +++++--
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/dock/create-resource/create-resource-templates.injectable.ts b/src/renderer/components/dock/create-resource/create-resource-templates.injectable.ts
index eac0bb4a1d..5f98e0b994 100644
--- a/src/renderer/components/dock/create-resource/create-resource-templates.injectable.ts
+++ b/src/renderer/components/dock/create-resource/create-resource-templates.injectable.ts
@@ -5,14 +5,14 @@
 import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
 import { computed } from "mobx";
 import type { GroupSelectOption, SelectOption } from "../../select";
-import lensCreateResourceTemplatesInjectable from "./lens-templates.injectable";
 import userCreateResourceTemplatesInjectable from "./user-templates.injectable";
+import lensCreateResourceTemplatesInjectable from "./lens-templates.injectable";
 
 export type RawTemplates = [group: string, items: [file: string, contents: string][]];
 
 const createResourceTemplatesInjectable = getInjectable({
-  instantiate: (di) => {
-    const lensResourceTemplates = di.inject(lensCreateResourceTemplatesInjectable);
+  instantiate: async (di) => {
+    const lensResourceTemplates = await di.inject(lensCreateResourceTemplatesInjectable);
     const userResourceTemplates = di.inject(userCreateResourceTemplatesInjectable);
 
     return computed(() => {
@@ -27,6 +27,7 @@ const createResourceTemplatesInjectable = getInjectable({
       }) as GroupSelectOption<SelectOption<string>>);
     });
   },
+
   lifecycle: lifecycleEnum.singleton,
 });
 
diff --git a/src/renderer/components/dock/create-resource/lens-templates.injectable.ts b/src/renderer/components/dock/create-resource/lens-templates.injectable.ts
index ed984c52e4..915cc8a7d7 100644
--- a/src/renderer/components/dock/create-resource/lens-templates.injectable.ts
+++ b/src/renderer/components/dock/create-resource/lens-templates.injectable.ts
@@ -5,10 +5,10 @@
 import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
 import path from "path";
 import { hasCorrectExtension } from "./has-correct-extension";
-import type { RawTemplates } from "./create-resource-templates.injectable";
 import "../../../../common/vars";
 import readFileInjectable from "../../../../common/fs/read-file.injectable";
 import readDirInjectable from "../../../../common/fs/read-dir.injectable";
+import type { RawTemplates } from "./create-resource-templates.injectable";
 
 interface Dependencies {
   readDir: (dirPath: string) => Promise<string[]>;
@@ -32,16 +32,16 @@ async function getTemplates({ readDir, readFile }: Dependencies) {
   return templates;
 }
 
-let lensTemplatePaths: RawTemplates;
-
 const lensCreateResourceTemplatesInjectable = getInjectable({
-  setup: async (di) => {
-    lensTemplatePaths = ["lens", await getTemplates({
+  instantiate: async (di): Promise<RawTemplates> => {
+    const templates = await getTemplates({
       readFile: di.inject(readFileInjectable),
       readDir: di.inject(readDirInjectable),
-    })];
+    });
+
+    return ["lens", templates];
   },
-  instantiate: () => lensTemplatePaths,
+
   lifecycle: lifecycleEnum.singleton,
 });
 
diff --git a/src/renderer/components/dock/create-resource/view.tsx b/src/renderer/components/dock/create-resource/view.tsx
index 6d8351ee11..5c27c0e06d 100644
--- a/src/renderer/components/dock/create-resource/view.tsx
+++ b/src/renderer/components/dock/create-resource/view.tsx
@@ -23,6 +23,7 @@ import { navigate } from "../../../navigation";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import createResourceTabStoreInjectable from "./store.injectable";
 import createResourceTemplatesInjectable from "./create-resource-templates.injectable";
+import { Spinner } from "../../spinner";
 
 interface Props {
   tab: DockTab;
@@ -143,9 +144,11 @@ class NonInjectedCreateResource extends React.Component<Props & Dependencies> {
 }
 
 export const CreateResource = withInjectables<Dependencies, Props>(NonInjectedCreateResource, {
-  getProps: (di, props) => ({
+  getPlaceholder: () => <Spinner center />,
+
+  getProps: async (di, props) => ({
     createResourceTabStore: di.inject(createResourceTabStoreInjectable),
-    createResourceTemplates: di.inject(createResourceTemplatesInjectable),
+    createResourceTemplates: await di.inject(createResourceTemplatesInjectable),
     ...props,
   }),
 });