From 593f1597f81aabab6a971f2dec1921a61cf7e254 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Wed, 20 Nov 2024 21:41:25 +0100
Subject: [PATCH] fix(ui): display loader during async loading component

I rencently introduced Async Components but some of them are really big,
and the loading time is noticable. It renders as blank area which is not
good.

So I used `loadingComponent` property to fill the space during the
loading, and improved a bit the loading strategy to improve the UX.
---
 src/ui/src/builder/BuilderApp.vue         | 51 ++++++++++++-----------
 src/ui/src/builder/BuilderAsyncLoader.vue | 19 +++++++++
 src/ui/src/builder/BuilderCodePanel.vue   |  9 +++-
 src/ui/src/builder/BuilderSettings.vue    |  9 +++-
 4 files changed, 60 insertions(+), 28 deletions(-)
 create mode 100644 src/ui/src/builder/BuilderAsyncLoader.vue

diff --git a/src/ui/src/builder/BuilderApp.vue b/src/ui/src/builder/BuilderApp.vue
index d1980d562..5f4162a71 100644
--- a/src/ui/src/builder/BuilderApp.vue
+++ b/src/ui/src/builder/BuilderApp.vue
@@ -105,31 +105,34 @@ import { isPlatformMac } from "../core/detectPlatform";
 import BuilderHeader from "./BuilderHeader.vue";
 import BuilderTooltip from "./BuilderTooltip.vue";
 import BuilderComponentShortcuts from "./BuilderComponentShortcuts.vue";
+import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
+import BuilderCodePanel from "./BuilderCodePanel.vue";
+import BuilderLogPanel from "./BuilderLogPanel.vue";
 
-const BuilderSettings = defineAsyncComponent(
-	() => import("./BuilderSettings.vue"),
-);
-const BuilderSidebar = defineAsyncComponent(
-	() => import("./BuilderSidebar.vue"),
-);
-const ComponentRenderer = defineAsyncComponent(
-	() => import("@/renderer/ComponentRenderer.vue"),
-);
-const BuilderInstanceTracker = defineAsyncComponent(
-	() => import("./BuilderInstanceTracker.vue"),
-);
-const BuilderInsertionOverlay = defineAsyncComponent(
-	() => import("./BuilderInsertionOverlay.vue"),
-);
-const BuilderInsertionLabel = defineAsyncComponent(
-	() => import("./BuilderInsertionLabel.vue"),
-);
-const BuilderCodePanel = defineAsyncComponent(
-	() => import("./BuilderCodePanel.vue"),
-);
-const BuilderLogPanel = defineAsyncComponent(
-	() => import("./BuilderLogPanel.vue"),
-);
+const BuilderSettings = defineAsyncComponent({
+	loader: () => import("./BuilderSettings.vue"),
+	loadingComponent: BuilderAsyncLoader,
+});
+const BuilderSidebar = defineAsyncComponent({
+	loader: () => import("./BuilderSidebar.vue"),
+	loadingComponent: BuilderAsyncLoader,
+});
+const ComponentRenderer = defineAsyncComponent({
+	loader: () => import("@/renderer/ComponentRenderer.vue"),
+	loadingComponent: BuilderAsyncLoader,
+});
+const BuilderInstanceTracker = defineAsyncComponent({
+	loader: () => import("./BuilderInstanceTracker.vue"),
+	loadingComponent: BuilderAsyncLoader,
+});
+const BuilderInsertionOverlay = defineAsyncComponent({
+	loader: () => import("./BuilderInsertionOverlay.vue"),
+	loadingComponent: BuilderAsyncLoader,
+});
+const BuilderInsertionLabel = defineAsyncComponent({
+	loader: () => import("./BuilderInsertionLabel.vue"),
+	loadingComponent: BuilderAsyncLoader,
+});
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
diff --git a/src/ui/src/builder/BuilderAsyncLoader.vue b/src/ui/src/builder/BuilderAsyncLoader.vue
new file mode 100644
index 000000000..27fb46e68
--- /dev/null
+++ b/src/ui/src/builder/BuilderAsyncLoader.vue
@@ -0,0 +1,19 @@
+<template>
+	<div class="BuilderAsyncLoader">
+		<LoadingSymbol />
+	</div>
+</template>
+
+<script setup lang="ts">
+import LoadingSymbol from "@/renderer/LoadingSymbol.vue";
+</script>
+
+<style scoped>
+.BuilderAsyncLoader {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+</style>
diff --git a/src/ui/src/builder/BuilderCodePanel.vue b/src/ui/src/builder/BuilderCodePanel.vue
index 78394bac1..2b7e329ee 100644
--- a/src/ui/src/builder/BuilderCodePanel.vue
+++ b/src/ui/src/builder/BuilderCodePanel.vue
@@ -17,11 +17,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref, watch } from "vue";
-import BuilderEmbeddedCodeEditor from "./BuilderEmbeddedCodeEditor.vue";
+import { computed, defineAsyncComponent, inject, ref, watch } from "vue";
 import BuilderPanel, { type BuilderPanelAction } from "./BuilderPanel.vue";
+import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
 import injectionKeys from "@/injectionKeys";
 
+const BuilderEmbeddedCodeEditor = defineAsyncComponent({
+	loader: () => import("./BuilderEmbeddedCodeEditor.vue"),
+	loadingComponent: BuilderAsyncLoader,
+});
+
 const wf = inject(injectionKeys.core);
 
 const wfbm = inject(injectionKeys.builderManager);
diff --git a/src/ui/src/builder/BuilderSettings.vue b/src/ui/src/builder/BuilderSettings.vue
index 679253caf..c8d88311e 100644
--- a/src/ui/src/builder/BuilderSettings.vue
+++ b/src/ui/src/builder/BuilderSettings.vue
@@ -68,14 +68,19 @@
 
 <script setup lang="ts">
 import { marked } from "marked";
-import { inject, computed, ref, watch } from "vue";
+import { inject, computed, ref, watch, defineAsyncComponent } from "vue";
 import injectionKeys from "../injectionKeys";
 
-import BuilderSettingsHandlers from "./BuilderSettingsHandlers.vue";
 import BuilderSettingsProperties from "./BuilderSettingsProperties.vue";
 import BuilderSettingsBinding from "./BuilderSettingsBinding.vue";
 import BuilderSettingsVisibility from "./BuilderSettingsVisibility.vue";
 import BuilderCopyText from "./BuilderCopyText.vue";
+import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
+
+const BuilderSettingsHandlers = defineAsyncComponent({
+	loader: () => import("./BuilderSettingsHandlers.vue"),
+	loadingComponent: BuilderAsyncLoader,
+});
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);