changes

app/components/Modal.vue

@@ -14,7 +14,7 @@
       <div
         class="modal-card"
         :style="{
-          width: $store.viewport <= 1 ? 'calc(100% - 2rem)' : width || '60%',
+          width: $store.viewport <= 1 ? 'calc(100% - 2rem)' : width,
         }"
       >
         <header
@@ -33,14 +33,25 @@
         </header>
         <section
           class="modal-card-body p-4"
-          :style="{ minHeight: height || '750px' }"
+          :style="{ minHeight: height }"
         >
-          <component
-            :is="resolvedComponent"
-            v-bind="vbind"
-            @modalevent="modalEvent"
-            @close="closeModal"
-          />
+          <Suspense>
+            <component
+              :is="resolvedComponent"
+              v-bind="vbind"
+              @modalevent="modalEvent"
+              @close="closeModal"
+            />
+            <template #fallback>
+              <div class="h-full is-flex is-justify-content-center is-align-items-center">
+                <Icon
+                  name="svg-spinners:180-ring-with-bg"
+                  :size="28"
+                  class="has-text-primary"
+                />
+              </div>
+            </template>
+          </Suspense>
         </section>
         <footer class="modal-card-foot px-4 pb-4 pt-0"></footer>
       </div>
@@ -56,8 +67,8 @@ const { $store } = useNuxtApp();
 
 const props = defineProps({
   component: String,
-  width: String,
-  height: String,
+  width: { type: String, default: "60%" },
+  height: { type: String, default: "750px" },
   vbind: Object,
   title: String,
 });