From c06ba304c5d2620f3ec119876bcc644b4425dcc0 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Sun, 29 Dec 2024 20:05:29 +0530
Subject: [PATCH] fix(UX): Fade transition while loading page

---
 frontend/src/components/BuilderCanvas.vue | 11 +++++++++
 frontend/src/components/Icons/Loading.vue | 30 ++++++-----------------
 frontend/src/store.ts                     | 14 ++++++-----
 3 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index 64286201..7c84cd23 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -287,3 +287,14 @@ function selectBreakpoint(ev: MouseEvent, breakpoint: BreakpointConfig) {
 
 const renderedBreakpoints = computed(() => canvasProps.breakpoints.filter((bp) => bp.renderedOnce));
 </script>
+<style>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.1s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+</style>
diff --git a/frontend/src/components/Icons/Loading.vue b/frontend/src/components/Icons/Loading.vue
index 1b5074a2..524ccc29 100644
--- a/frontend/src/components/Icons/Loading.vue
+++ b/frontend/src/components/Icons/Loading.vue
@@ -1,29 +1,15 @@
 <template>
 	<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
-		<circle cx="18" cy="12" r="0" fill="currentColor">
+		<circle
+			v-for="(begin, index) in [0, 0.33, 0.67]"
+			:key="index"
+			:cx="6 + index * 6"
+			cy="12"
+			r="0"
+			fill="currentColor">
 			<animate
 				attributeName="r"
-				begin=".67"
-				calcMode="spline"
-				dur="1.5s"
-				keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
-				repeatCount="indefinite"
-				values="0;2;0;0" />
-		</circle>
-		<circle cx="12" cy="12" r="0" fill="currentColor">
-			<animate
-				attributeName="r"
-				begin=".33"
-				calcMode="spline"
-				dur="1.5s"
-				keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
-				repeatCount="indefinite"
-				values="0;2;0;0" />
-		</circle>
-		<circle cx="6" cy="12" r="0" fill="currentColor">
-			<animate
-				attributeName="r"
-				begin="0"
+				:begin="begin"
 				calcMode="spline"
 				dur="1.5s"
 				keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8"
diff --git a/frontend/src/store.ts b/frontend/src/store.ts
index 964ff1ba..7f7474ad 100644
--- a/frontend/src/store.ts
+++ b/frontend/src/store.ts
@@ -2,6 +2,7 @@ import BlockContextMenu from "@/components/BlockContextMenu.vue";
 import router from "@/router";
 import { posthog } from "@/telemetry";
 import { BuilderSettings } from "@/types/Builder/BuilderSettings";
+import useComponentStore from "@/utils/useComponentStore";
 import { UseRefHistoryReturn, useStorage } from "@vueuse/core";
 import { createDocumentResource } from "frappe-ui";
 import { defineStore } from "pinia";
@@ -155,13 +156,14 @@ const useStore = defineStore("store", {
 			await this.setPageData(this.activePage);
 			this.activeCanvas?.setRootBlock(this.pageBlocks[0], resetCanvas);
 			nextTick(() => {
+				const componentStore = useComponentStore();
 				const interval = setInterval(() => {
-					// if (this.fetchingComponent.size === 0) {
-					this.settingPage = false;
-					window.name = `editor-${pageName}`;
-					clearInterval(interval);
-					// }
-				}, 100);
+					if (!componentStore.fetchingComponent.size) {
+						this.settingPage = false;
+						window.name = `editor-${pageName}`;
+						clearInterval(interval);
+					}
+				}, 50);
 			});
 		},
 		async setActivePage(pageName: string) {