@eodash/eodash 5.0.0-alpha.1.8 → 5.0.0-alpha.2

package/core/components/DashboardLayout.vue

@@ -1,36 +1,47 @@
 <template>
   <v-main>
-    <eox-layout :gap="eodashConfig.template.gap ?? 2">
-      <eox-layout-item class="bg-widget" x="0" y="0" h="12" w="12">
-        <component :is="bgWidget.component" v-bind="bgWidget.props" />
+    <eox-layout :gap="eodash.template.gap ?? 2">
+      <eox-layout-item style="z-index: 0;" x="0" y="0" h="12" w="12">
+        <Suspense>
+          <component id="bg-widget" :is="bgWidget.component" v-bind="bgWidget.props" />
+          <template #fallback>
+            <Loading />
+          </template>
+        </Suspense>
       </eox-layout-item>
-      <eox-layout-item v-for="(config, idx) in widgetsConfig" ref="itemEls" :key="idx" class="custom-widget"
+      <eox-layout-item v-for="(config, idx) in widgetsConfig" ref="itemEls" :key="idx"
+        style="position: relative; overflow: visible; z-index: 1; border-radius: 0px; background: rgb(var(--v-theme-surface))"
         :x="config.layout.x" :y="config.layout.y" :h="config.layout.h" :w="config.layout.w">
 
-        <v-btn position="absolute" variant="tonal" :style="slideBtns[idx].style" class="slide-btn"
-          @click="slideInOut(idx)">
+        <v-btn v-if="slideBtns[idx].enabled" position="absolute" variant="tonal" :style="slideBtns[idx].style"
+          class="slide-btn" @click="slideInOut(idx)">
           <v-icon :icon="slideBtns[idx].active ? slideBtns[idx].icon.in : slideBtns[idx].icon.out" />
         </v-btn>
-        <component :key="importedWidgets[idx].value.id" :is="importedWidgets[idx].value.component"
-          v-bind="importedWidgets[idx].value.props" />
+        <Suspense>
+          <component :key="importedWidgets[idx].value.id" :is="importedWidgets[idx].value.component"
+            v-bind="importedWidgets[idx].value.props" />
+          <template #fallback>
+            <Loading />
+          </template>
+        </Suspense>
 
       </eox-layout-item>
     </eox-layout>
   </v-main>
 </template>
 <script setup>
-import { eodashConfigKey } from '@/store/Keys';
+import { eodashKey } from '@/utils/keys';
 import { inject } from 'vue';
 import { useDefineWidgets } from '@/composables/DefineWidgets'
 import { useSlidePanels } from '@/composables'
 import { ref } from 'vue';
 import '@eox/layout'
 
-const eodashConfig = /** @type {import("@/types").EodashConfig} */ (inject(eodashConfigKey))
+const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey))
 
-const [bgWidget] = useDefineWidgets([eodashConfig.template?.background])
+const [bgWidget] = useDefineWidgets([eodash.template?.background])
 
-const widgetsConfig = eodashConfig.template?.widgets
+const widgetsConfig = eodash.template?.widgets
 
 const importedWidgets = useDefineWidgets(widgetsConfig)
 /**
@@ -41,18 +52,3 @@ const itemEls = ref([])
 
 const { slideBtns, slideInOut } = useSlidePanels(itemEls, widgetsConfig)
 </script>
-<style scoped>
-eox-layout-item {
-  background: rgb(var(--v-theme-surface))
-}
-
-.bg-widget {
-  z-index: 0;
-}
-
-.custom-widget {
-  position: relative;
-  overflow: visible;
-  z-index: 1;
-}
-</style>

package/core/components/DynamicWebComponent.vue

@@ -11,7 +11,6 @@ import {
   onMounted as whenMounted
 } from 'vue';
 import { ref } from 'vue';
-import { useRouter } from 'vue-router';
 
 const props =   /** @type {import("@/types").WebComponentProps}  */(defineProps({
   link: {
@@ -52,17 +51,18 @@ if (!defined && props.constructorProp) {
 const store = useSTAcStore()
 
 /**
- * @template {HTMLElement} CE
- * @type {import('vue').Ref<CE|null>}
+ *  @typedef {HTMLElement &
+ * Record<string|number|symbol,unknown>} CustomElement
+ * @type {import('vue').Ref<CustomElement|null>}
  */
 const elementRef = ref(null)
-const router = useRouter()
+
 
 whenMounted(() => {
-  props.onMounted?.(elementRef.value, store, router)
+  props.onMounted?.(elementRef.value, store)
 })
 
 whenUnMounted(() => {
-  props.onUnmounted?.(elementRef.value, store, router)
+  props.onUnmounted?.(elementRef.value, store)
 })
 </script>

package/core/components/Footer.vue

@@ -1,16 +1,19 @@
 <template>
   <v-footer ref="footer" :height="mdAndDown ? '48px' : 'auto'" color="secondary" app
     class="d-flex justify-space-between">
-    <p class="pt-0 footer-text">
-      Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet. Mauris cursus commodo interdum.
+    <p class="pt-0" style="font-size: 0.8rem;">
+      {{ eodash.brand.footerText ?? "" }}
     </p>
-    <div class="footer-text">
-      {{ new Date().getFullYear() }} — <strong>{{ title }}</strong>
+    <div>
+      <a href="https://github.com/eodash/eodash" class="text-white" target="_blank">eodash</a> by
+      <a href="https://eox.at" target="_blank" class="text-white">
+        <img :src='`data:image/svg+xml;base64,${base64Logo}`' height="11px">
+      </a>
     </div>
   </v-footer>
 </template>
 <script setup>
-import { eodashConfigKey } from '@/store/Keys';
+import { eodashKey } from '@/utils/keys';
 import { ref } from 'vue';
 import { inject } from 'vue';
 import { useDisplay } from 'vuetify/lib/framework.mjs';
@@ -20,13 +23,9 @@ import { useDisplay } from 'vuetify/lib/framework.mjs';
  * @type {import('vue').Ref<import('vuetify/lib/components/index.mjs').VFooter | null>}
  */
 const footer = ref(null)
-const eodashConfig = /** @type {import("@/types").EodashConfig} */(inject(eodashConfigKey))
+const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey))
 
-const title = eodashConfig.brand?.shortName ?? eodashConfig.brand?.name
 const { mdAndDown } = useDisplay()
+const eoxLogo = `<svg width="100%" height="100%" viewBox="0 0 355 85" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="ink_ext_XXXXXX"><path id="path5076" d="M152.986,40.52l-0.75,-0.019l-0.737,-0.056l-0.725,-0.093l-0.713,-0.127l-0.7,-0.162l-0.7,-0.196l-0.675,-0.228l-0.65,-0.261l-0.65,-0.292l-0.625,-0.319l-0.612,-0.352l-0.588,-0.377l-0.562,-0.407l-0.55,-0.431l-0.538,-0.457l-0.5,-0.481l-0.487,-0.505l-0.45,-0.528l-0.438,-0.55l-0.4,-0.57l-0.375,-0.59l-0.35,-0.609l-0.325,-0.627l-0.287,-0.645l-0.263,-0.66l-0.225,-0.676l-0.2,-0.69l-0.162,-0.704l-0.125,-0.717l-0.1,-0.728l-0.05,-0.739l-0.025,-0.748c0,-8.023 6.512,-14.532 14.537,-14.532c8.038,0 14.538,6.509 14.538,14.532c0,8.036 -6.5,14.544 -14.538,14.544Z" style="fill:none;"/><path id="path5078" d="M165.748,-0.002c-42.009,0 -76.06,18.985 -76.06,42.402c0,13.268 10.921,25.102 28.021,32.875c-8.081,-5.487 -13.403,-12.973 -14.584,-21.859c-2.685,-20.186 16.83,-40.82 45.148,-49.615c-14.687,6.665 -24.923,21.427 -24.923,38.599c0,23.218 18.648,42.046 41.773,42.383c-0.037,0.005 -0.087,0.015 -0.137,0.02c0.263,0 0.512,0.009 0.762,0.009c42.013,0 76.076,-18.984 76.076,-42.412c0,-13.261 -10.937,-25.097 -28.037,-32.871l0.75,0.522l0.736,0.531l0.713,0.543l0.7,0.555l0.687,0.566l0.664,0.578l0.649,0.588l0.625,0.6l0.613,0.609l0.588,0.621l0.574,0.631l0.562,0.643l0.538,0.652l0.513,0.662l0.5,0.672l0.475,0.684l0.449,0.693l0.438,0.703l0.425,0.713l0.387,0.723l0.375,0.73l0.352,0.74l0.336,0.75l0.3,0.76l0.287,0.77l0.264,0.777l0.25,0.787l0.211,0.795l0.188,0.805l0.175,0.812l0.151,0.82l0.125,0.831c2.675,20.19 -16.838,40.825 -45.151,49.619c14.688,-6.665 24.926,-21.426 24.926,-38.614c0,-23.202 -18.65,-42.026 -41.775,-42.367c0.05,-0.005 0.1,-0.015 0.15,-0.025c-0.262,0 -0.526,-0.01 -0.789,-0.01Zm-13.248,11.314c7.817,0 14.25,6.433 14.25,14.25c0,0.001 0,0.001 0,0.001c0,7.817 -6.433,14.249 -14.25,14.249c-7.817,0 -14.25,-6.432 -14.25,-14.249c0,-0.001 0,-0.001 0,-0.001c0,-7.817 6.433,-14.25 14.25,-14.25Z" style="fill:#fff;fill-rule:nonzero;"/><path id="path5080" d="M213.786,9.529l0.75,0.521l0.738,0.532l0.712,0.544l0.7,0.555l0.688,0.566l0.662,0.577l0.65,0.588l0.625,0.6l0.613,0.61l0.587,0.62l0.575,0.631l0.563,0.643l0.537,0.652l0.513,0.663l0.5,0.672l0.475,0.684l0.45,0.692l0.437,0.703l0.425,0.712l0.388,0.723l0.375,0.731l0.35,0.741l0.337,0.75l0.3,0.76l0.288,0.769l0.262,0.777l0.25,0.786l0.213,0.797l0.187,0.804l0.175,0.812l0.15,0.821l0.125,0.83c2.675,20.19 -16.837,40.825 -45.15,49.619c14.688,-6.665 24.925,-21.426 24.925,-38.614c0,-23.202 -18.65,-42.025 -41.775,-42.367c0.05,-0.005 0.1,-0.015 0.15,-0.025c-0.262,0 -0.525,-0.01 -0.787,-0.01c-42.01,0 -76.062,18.985 -76.062,42.402c0,13.268 10.922,25.103 28.022,32.876c-8.081,-5.487 -13.403,-12.973 -14.584,-21.859c-2.685,-20.187 16.831,-40.82 45.149,-49.615c-14.688,6.665 -24.925,21.426 -24.925,38.598c0,23.218 18.65,42.046 41.775,42.383c-0.038,0.005 -0.088,0.015 -0.138,0.02c0.263,0 0.513,0.01 0.763,0.01c42.012,-0.001 76.075,-18.985 76.075,-42.413c0,-13.261 -10.938,-25.097 -28.038,-32.871Z" style="fill:none;"/><path id="path5082" d="M354.323,82.586l-41.999,-42.002l38.524,-38.515l-29.913,0l-23.562,23.559l-23.563,-23.559l-29.924,0l38.525,38.515l-42,42.002l29.913,0l27.049,-27.046l27.05,27.046l29.9,0" style="fill:#fff;fill-rule:nonzero;"/><path id="path5084" d="M354.323,82.586l-41.999,-42.002l38.524,-38.515l-29.913,0l-23.562,23.559l-23.563,-23.559l-29.924,0l38.525,38.515l-42,42.002l29.913,0l27.049,-27.046l27.05,27.046l29.9,0Z" style="fill:none;"/><path id="path5086" d="M0,2.069l75.033,0l0,16.489l-51.629,0l0,14.931l40.258,0l0,16.495l-40.258,0l0,16.05l53.124,0l0,16.488l-76.528,0l0,-80.453" style="fill:#fff;fill-rule:nonzero;"/><path id="path5088" d="M0,2.069l75.033,0l0,16.489l-51.629,0l0,14.931l40.258,0l0,16.495l-40.258,0l0,16.05l53.124,0l0,16.488l-76.528,0l0,-80.453Z" style="fill:none;"/></g></svg>`
+const base64Logo = window.btoa(eoxLogo)
 </script>
-<style scoped lang='scss'>
-.footer-text {
-  font-size: 0.8rem;
-}
-</style>

package/core/components/Header.vue

@@ -1,38 +1,14 @@
 <template>
   <v-app-bar color="primary">
-    <v-app-bar-title class="cursor-pointer">{{ title }}</v-app-bar-title>
-    <v-toolbar-items v-if="eodashConfig.routes">
-      <v-btn v-for="route in eodashConfig.routes" :key="route.to" variant="text" @click="navigateTo(route.to)">
-        {{ route.title }}
-      </v-btn>
-    </v-toolbar-items>
-    <v-img class="mx-12 logo" :src="eodashConfig.brand?.logo" />
+    <v-app-bar-title>{{ title }}</v-app-bar-title>
+    <v-img class="mx-12" style="max-width: 140px;" :src="eodash.brand?.logo" />
   </v-app-bar>
 </template>
 <script setup>
-import { eodashConfigKey } from '@/store/Keys';
+import { eodashKey } from '@/utils/keys';
 import { inject } from 'vue';
-import { useRouter } from 'vue-router';
 
-const eodashConfig = /** @type {import("@/types").EodashConfig} */(inject(eodashConfigKey))
+const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey))
 
-const title = eodashConfig.brand?.name
-
-const { push } = useRouter()
-
-/**
- * @param {string} to
- */
-const navigateTo = (to) => {
-  if (to.toLowerCase().startsWith('http')) {
-    window.open(to, '_self')
-  } else {
-    push(to)
-  }
-}
+const title = eodash.brand?.name
 </script>
-<style scoped lang='scss'>
-.logo {
-  max-width: 140px;
-}
-</style>

package/core/components/Loading.vue

@@ -0,0 +1,27 @@
+<template>
+  <v-row class="d-flex justify-center align-center ">
+    <v-col class="flex-column justify-center align-center">
+      <Suspense>
+        <component v-if="loading.component" :is="loading.component" v-bind="loading.props"></component>
+        <div v-else class="text-center">
+          Loading...
+        </div>
+        <template #fallback>
+          <div class="text-center">
+            Loading...
+          </div>
+        </template>
+      </Suspense>
+    </v-col>
+  </v-row>
+</template>
+<script setup>
+import { inject } from 'vue';
+import { eodashKey } from '@/utils/keys';
+import { useDefineWidgets } from '@/composables/DefineWidgets';
+
+const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey))
+
+const [loading] = useDefineWidgets([eodash.template.loading])
+
+</script>

package/core/components/MobileLayout.vue

@@ -1,78 +1,49 @@
 <template>
-  <v-main class="overflow-none" style="height: 91dvh;">
+  <v-main class="overflow-hidden" style="height: 91dvh;">
+
+    <component id="bg-widget" :is="bgWidget.component" v-bind="bgWidget.props"></component>
+
+    <div v-show="activeIdx === idx" id="overlay" class="pa-2" v-for="(importedWidget, idx) in importedWidgets"
+      :key="idx" :style="{
+        bottom: tabsHeightFromBtm, position: 'absolute', overflow: 'hidden',
+        width: '100%', left: 0, top: mainRect.top + 'px', zIndex: 1, background: 'rgb(var(--v-theme-surface))'
+      }">
+      <v-btn icon variant="text" style="height: 5%;position: relative;" @click="activeIdx = -1">&#x2715;</v-btn>
+      <component style="height: 94% !important;" :key="importedWidget.value.id" :is="importedWidget.value.component"
+        v-show="activeIdx === idx" v-bind="importedWidget.value.props" />
+    </div>
+
+    <v-tabs ref="tabs" align-tabs="center" bg-color="surface"
+      :style="{ position: 'relative', bottom: (mainRect.bottom || 48) + 'px', zIndex: 10 }" show-arrows
+      v-model="activeIdx">
+      <v-tab v-for="(importedWidget, idx) in importedWidgets" :key="idx" :value="idx">
+        {{ importedWidget.value.title }}
+      </v-tab>
+    </v-tabs>
 
-    <component :is="bgWidget.component" v-bind="bgWidget.props"></component>
-
-    <v-row no-gutters class="d-flex justify-center align-end">
-      <v-col v-for="(importedWidget, idx) in importedWidgets" :key="idx" :cols="cols"
-        class="flex-column fill-height fill-width elevation-1 align-start ma-0 justify-center">
-        <span class="d-flex pa-2 justify-center ma-0 panel-header align-center fill-width"
-          @click="handleSelection(idx)">
-          {{ importedWidget.value.title }}
-        </span>
-        <div v-show="activeIdx === idx" class="overlay align-self-end overflow-auto pa-2">
-          <v-btn icon variant="text" class="close-btn" @click="activeIdx = -1">&#x2715;</v-btn>
-          <component :key="importedWidget.value.id" :is="importedWidget.value.component" v-show="activeIdx === idx"
-            v-bind="importedWidget.value.props" />
-        </div>
-      </v-col>
-    </v-row>
   </v-main>
 </template>
 <script setup>
-import { eodashConfigKey } from '@/store/Keys';
-import { inject } from 'vue';
+import { eodashKey } from '@/utils/keys';
+import { inject, ref, onMounted } from 'vue';
 import { useDefineWidgets } from '@/composables/DefineWidgets'
-import { ref } from 'vue';
+import { useLayout } from "vuetify"
 
-const eodashConfig = /** @type {import("@/types").EodashConfig} */(inject(eodashConfigKey));
+const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey));
 
 //import widgets
-const widgetsConfig = eodashConfig.template.widgets
+const widgetsConfig = eodash.template.widgets
 const importedWidgets = useDefineWidgets(widgetsConfig)
-const [bgWidget] = useDefineWidgets([eodashConfig.template?.background])
-
-
+const [bgWidget] = useDefineWidgets([eodash.template?.background])
 
-/**
- * number of flex columns
- */
-const cols = importedWidgets.length / 12
+const { mainRect } = useLayout()
 
-/**
- * index of the active tab
- */
 const activeIdx = ref(-1)
 
-/**
-* @param {number} idx
-**/
-const handleSelection = (idx) => {
-  activeIdx.value = activeIdx.value === idx ? -1 : idx
-}
+/** @type {import("vue").Ref<import("vuetify/components").VTabs|null>} */
+const tabs = ref(null)
+const tabsHeightFromBtm = ref('')
+onMounted(() => {
+  tabsHeightFromBtm.value = mainRect.value.bottom + (/** @type {HTMLElement} */(tabs.value?.$el)?.clientHeight ?? 0) + "px"
+})
 </script>
-<style scoped lang='scss'>
-.panel-header {
-  height: auto;
-  margin: 0;
-  width: 100%;
-  position: relative;
-  bottom: 64px;
-  z-index: 10;
-  background: rgb(var(--v-theme-background));
-}
-
-.overlay {
-  position: absolute;
-  width: 100%;
-  left: 0;
-  top: 64px;
-  bottom: 64px;
-  z-index: 1;
-  background: rgb(var(--v-theme-background));
-}
-
-.close-btn {
-  justify-self: end;
-}
-</style>

package/core/composables/DefineEodash.js

@@ -0,0 +1,57 @@
+import store from "@/store";
+import { eodashKey } from "@/utils/keys";
+import { inject } from "vue";
+
+
+
+/**
+ * Sets user defined instance on runtime.
+ * Consumes `/@fs/config.js` and assign it to `eodash`
+ * @async
+ * @returns {Promise<import("@/types").Eodash>}
+ * @param {string | undefined} runtimeConfig
+ * @see {@linkplain '@/eodash.js'}
+ */
+export const useEodashRuntime = async (runtimeConfig) => {
+  const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey))
+  /**
+   * @param {import("@/types").Eodash} config
+   */
+  const assignInstance = (config) => {
+       /** @type {(keyof import("@/types").Eodash)[]} */(Object.keys(eodash))
+      .forEach((key) => {
+        //@ts-expect-error
+        eodash[key] = config[key]
+      })
+  }
+
+  if (runtimeConfig) {
+    assignInstance((await import( /* @vite-ignore */new URL(runtimeConfig, import.meta.url).href)).default);
+    return eodash
+  }
+
+  try {
+    assignInstance(
+      (await import( /* @vite-ignore */new URL('/config.js', import.meta.url).href)).default
+    )
+  } catch {
+    try {
+      assignInstance(await import("user:config").then(async m => await m['default']))
+    } catch {
+      console.error('no dashboard configuration defined')
+    }
+  }
+  return eodash
+}
+
+/**
+ * @param {((store:import("@/types").EodashStore)=> Promise<import("@/types").Eodash>)
+ * | import("@/types").Eodash}  config
+ */
+export const createEodash = async (config) => {
+  if (config instanceof Function) {
+    return await config(store)
+  } else {
+    return config
+  }
+}

package/core/composables/DefineWidgets.js

@@ -1,8 +1,7 @@
 import { defineAsyncComponent, reactive, shallowRef, watch } from 'vue'
 import { useSTAcStore } from '@/store/stac'
 import { storeToRefs } from 'pinia'
-
-
+import Loading from '@/components/Loading.vue';
 
 /**
  * @typedef {{
@@ -17,17 +16,27 @@ import { storeToRefs } from 'pinia'
  * @typedef {import('vue').ShallowRef<DefinedWidget>} ReactiveDefinedWidget
 */
 
+const internalWidgets = (() => {
+  /**
+   * @type {Record<string,() => Promise<import('vue').Component>>}
+   */
+  const importMap = {
+    ...import.meta.glob('^/**/*.vue'),
+    ...import.meta.glob("user:widgets/**/*.vue")
+  }
+  for (const key in importMap) {
+    const newKey = /** @type {string} */(key.split('/').at(-1)).slice(0, -4)
+    Object.defineProperty(importMap, newKey,
+      /** @type {PropertyDescriptor} */(Object.getOwnPropertyDescriptor(importMap, key)));
+    delete importMap[key];
+  }
+  return importMap
+})();
 
 
-/**
- * import map to all vue components inside `widgets` directory.
- * @type {Record<string,() => Promise<import('vue').Component>>}
- */
-const internalWidgets = import.meta.glob('^/**/*.vue')
-
 /**
  * Composable that converts widgets Configurations to defined imported widgets
- * @param { (import("@/types").WidgetConfig | import("@/types").BackgroundWidgetConfig | undefined)[] |
+ * @param { (import("@/types").Widget | import("@/types").BackgroundWidget | undefined)[] |
  * import("@/types").WidgetsContainerProps['widgets'] | undefined} widgetConfigs
  * @returns {Array<ReactiveDefinedWidget>}
  **/
@@ -46,7 +55,6 @@ export const useDefineWidgets = (widgetConfigs) => {
       props: {},
       title: '',
       id: Symbol(),
-      no: '4'
     })
 
     if ('defineWidget' in (config ?? {})) {
@@ -84,17 +92,19 @@ const getWidgetDefinition = (config) => {
   switch (config?.type) {
     case 'internal':
       importedWidget.component = defineAsyncComponent({
-        loader: internalWidgets[`/widgets/${/** @type {import("@/types").InternalComponentConfig} **/(config)?.widget.name}.vue`],
-        suspensible: true
+        loader: internalWidgets[/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.name],
+        suspensible: true,
+        loadingComponent: Loading
       })
-      importedWidget.props = reactive(/** @type {import("@/types").InternalComponentConfig} **/(config)?.widget.props ?? {})
+      importedWidget.props = reactive(/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.properties ?? {})
 
       break;
 
     case 'web-component':
       importedWidget.component = defineAsyncComponent({
         loader: () => import('@/components/DynamicWebComponent.vue'),
-        suspensible: true
+        suspensible: true,
+        loadingComponent: Loading
       })
       importedWidget.props = reactive(config.widget)
 
@@ -102,7 +112,8 @@ const getWidgetDefinition = (config) => {
     case 'iframe':
       importedWidget.component = defineAsyncComponent({
         loader: () => import('@/components/IframeWrapper.vue'),
-        suspensible: true
+        suspensible: true,
+        loadingComponent: Loading
       })
       importedWidget.props = reactive(config.widget)
       break;