Merge pull request #641 from madeindjs/async-loader

fix(ui): display loader during async loading component

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);

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>

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);

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);