perf: Fetch BlockTemplate block on demand

frappe · Sep 19, 2024 · bca4703 · bca4703
1 parent a723e13
commit bca4703
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
@@ -76,7 +76,6 @@
 </template>
 <script setup lang="ts">
 import LoadingIcon from "@/components/Icons/Loading.vue";
-import builderBlockTemplate from "@/data/builderBlockTemplate";
 import { posthog } from "@/telemetry";
 import Block from "@/utils/block";
 import getBlockTemplate from "@/utils/blockTemplate";
@@ -222,8 +221,8 @@ const { isOverDropZone } = useDropZone(canvasContainer, {
 			ev.stopPropagation();
 			posthog.capture("builder_component_used");
 		} else if (blockTemplate) {
-			const templateDoc = builderBlockTemplate.getRow(blockTemplate);
-			const newBlock = getBlockInstance(templateDoc.block, false);
+			await store.fetchBlockTemplate(blockTemplate);
+			const newBlock = getBlockInstance(store.getBlockTemplate(blockTemplate).block, false);
 			// if shift key is pressed, replace parent block with new block
 			if (ev.shiftKey) {
 				while (parentBlock && parentBlock.isChildOfComponent) {

diff --git a/frontend/src/data/builderBlockTemplate.ts b/frontend/src/data/builderBlockTemplate.ts
@@ -3,7 +3,7 @@ import { createListResource } from "frappe-ui";
 const builderBlockTemplate = createListResource({
 	method: "GET",
 	doctype: "Block Template",
-	fields: ["template_name", "category", "preview", "block", "name", "preview_width", "preview_height"],
+	fields: ["template_name", "category", "preview", "name", "preview_width", "preview_height"],
 	orderBy: "modified desc",
 	cache: "blockTemplates",
 	start: 0,

diff --git a/frontend/src/store.ts b/frontend/src/store.ts
@@ -1,4 +1,5 @@
 import { posthog } from "@/telemetry";
+import { BuilderSettings } from "@/types/Builder/BuilderSettings";
 import { UseRefHistoryReturn } from "@vueuse/core";
 import { FileUploadHandler, createDocumentResource } from "frappe-ui";
 import { defineStore } from "pinia";
@@ -73,6 +74,7 @@ const useStore = defineStore("store", {
 		realtime: new RealTimeHandler(),
 		viewers: <UserInfo[]>[],
 		componentMap: <Map<string, Block>>new Map(),
+		blockTemplateMap: <Map<string, BlockTemplate>>new Map(),
 		fetchingComponent: new Set(),
 		fragmentData: {
 			block: <Block | null>null,
@@ -260,7 +262,7 @@ const useStore = defineStore("store", {
 			return getBlockInstance(this.getBlockTemplate(blockTemplateName).block);
 		},
 		getBlockTemplate(blockTemplateName: string) {
-			return builderBlockTemplate.getRow(blockTemplateName) as BlockTemplate;
+			return this.blockTemplateMap.get(blockTemplateName) as BlockTemplate;
 		},
 		isComponentUsed(componentName: string) {
 			// TODO: Refactor or reduce complexity
@@ -313,6 +315,19 @@ const useStore = defineStore("store", {
 				this.fetchingComponent.delete(componentName);
 			}
 		},
+		async fetchBlockTemplate(blockTemplateName: string) {
+			const blockTemplate = this.getBlockTemplate(blockTemplateName);
+			if (!blockTemplate) {
+				const webBlockTemplate = await createDocumentResource({
+					doctype: "Block Template",
+					name: blockTemplateName,
+					auto: true,
+				});
+				await webBlockTemplate.get.promise;
+				const blockTemplate = webBlockTemplate.doc as BlockTemplate;
+				this.blockTemplateMap.set(blockTemplateName, blockTemplate);
+			}
+		},
 		getComponent(componentName: string) {
 			return webComponent.getRow(componentName) as BuilderComponent;
 		},