@tailor-cms/tce-preview-runtime 0.0.27 → 0.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailor-cms/tce-preview-runtime",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "dependencies": {
     "@mdi/font": "^7.0.96",
     "@vitejs/plugin-vue": "4.3.4",

package/src/App.vue

@@ -17,13 +17,19 @@ onMounted(async () => {
   });
 });
 
+function timeout(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
 async function getElement() {
   try {
     const response = await api('content-element').json();
     return response || {};
   } catch (error) {
     console.log('Error on element get', error);
-    return { msg: 'Error upon retrieving element state' };
+    await timeout(2000);
+    console.log('Retrying element get...');
+    return getElement();
   }
 }
 </script>

package/src/components/MainLayout.vue

@@ -12,19 +12,37 @@ const props = defineProps<{ element: any }>();
 const { isDark } = useGlobalState();
 const isLoaded = ref(false);
 
+const runtimeId = import.meta.env.VITE_RUNTIME_ID;
+const bootRegistry = JSON.parse(
+  localStorage.getItem('element-kit-boot') || '{}',
+);
+const isFirstBoot = !bootRegistry[runtimeId];
+
 onMounted(() => {
   // Client/server vertical split
   Split([`#panelTop`, `#panelBottom`], {
     direction: 'vertical',
     sizes: [70, 30],
   });
-  setTimeout(() => (isLoaded.value = true), 5000);
+  setTimeout(
+    () => {
+      isLoaded.value = true;
+      localStorage.setItem(
+        'element-kit-boot',
+        JSON.stringify({
+          ...bootRegistry,
+          [runtimeId]: true,
+        }),
+      );
+    },
+    isFirstBoot ? 17000 : 5000,
+  );
 });
 </script>
 
 <template>
   <main :class="{ 'dark-theme': isDark }">
-    <SplashLoader v-show="!isLoaded" />
+    <SplashLoader v-show="!isLoaded" :is-first-boot="isFirstBoot" />
     <PreviewPanel id="panelTop" :is-loaded="isLoaded" />
     <BottomPanel
       id="panelBottom"

package/src/components/SplashLoader.vue

@@ -7,6 +7,11 @@
         </div>
         <div class="splash-loader__text text-body-1">
           <div>Booting Teaching Element Kit....</div>
+          <v-progress-linear
+            v-if="isFirstBoot"
+            :model-value="progress"
+            class="my-3"
+          />
           <div class="font-weight-bold">Alpha preview v0.0.1</div>
         </div>
       </div>
@@ -19,6 +24,10 @@ import logoUrl from '../assets/logo.png';
 
 export default {
   props: {
+    isFirstBoot: {
+      type: Boolean,
+      required: true,
+    },
     logo: {
       type: String,
       default: logoUrl,
@@ -32,8 +41,20 @@ export default {
       default: '#fff',
     },
   },
-  created() {
+  data: () => ({
+    interval: 0,
+    progress: 0,
+  }),
+  mounted() {
     this.setColor();
+    if (!this.isFirstBoot) return;
+    this.interval = setInterval(() => {
+      this.progress += 1;
+      if (this.progress === 100) clearInterval(this.interval);
+    }, 160);
+  },
+  beforeUnmount() {
+    clearInterval(this.interval);
   },
   methods: {
     setColor() {