@raclettejs/core 0.1.37 → 0.1.38

package/services/frontend/src/orchestrator/components/CompositionLoadingState.vue

@@ -0,0 +1,28 @@
+<template>
+  <div
+    class="tw:flex tw:min-h-[160px] tw:w-full tw:items-center tw:justify-center"
+    role="status"
+    :aria-label="$t('core.app_loading')"
+  >
+    <v-progress-circular
+      indeterminate
+      color="primary"
+      :size="size"
+      :width="strokeWidth"
+    />
+    <span class="tw:sr-only">{{ $t("core.app_loading") }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    size?: number | string
+    strokeWidth?: number | string
+  }>(),
+  {
+    size: 32,
+    strokeWidth: 3,
+  },
+)
+</script>

package/services/frontend/src/orchestrator/components/composition/CompositionOverlay.vue

@@ -1,12 +1,13 @@
 <template>
   <DefaultModal v-model="showModal">
-    <div class="tw:p-5 tw:h-full" ref="appCompositionOverlay">
+    <div class="tw:h-full tw:p-5">
       <WidgetsLayoutLoader
         v-if="widgetsLayout"
+        reveal-when-ready
+        :loading-size="40"
         :widgets-layout="widgetsLayout"
         :slot-layout="slotLayout"
         slot-type="modal"
-        :max-height="availableComponentHeight"
       />
     </div>
   </DefaultModal>
@@ -15,13 +16,10 @@
 <script setup lang="ts">
 import { DefaultModal, WidgetsLayoutLoader } from "@racletteOrchestrator"
 import useCurrentComposition from "@racletteOrchestrator/composables/useCurrentComposition"
-import { computed, useTemplateRef } from "vue"
+import { computed } from "vue"
 import useRouteState from "@racletteOrchestrator/composables/useRouteState"
 import { DEFAULT_MODAL_SLOT_NAME } from "@racletteOrchestrator/router/routeParserHelper"
-const appCompositionOverlayRef = useTemplateRef("appCompositionOverlay")
-const availableComponentHeight = computed(
-  () => appCompositionOverlayRef?.value?.offsetHeight || 400,
-)
+
 const { widgetsLayout, slotLayout } = useCurrentComposition(
   DEFAULT_MODAL_SLOT_NAME,
 )

package/services/frontend/src/orchestrator/components/composition/WidgetsLayoutLoader.vue

@@ -1,27 +1,37 @@
 <template>
   <div
-    class="tw:max-w-full tw:min-h-fit"
+    class="tw:relative tw:max-w-full tw:min-h-fit"
     :class="{
+      'tw:min-h-[200px]': showLoadingOverlay,
       'tw:p-4':
         slotLayout !== 'default' &&
         slotLayout !== 'inline' &&
         slotLayout !== 'full',
     }"
+    :aria-busy="showLoadingOverlay"
   >
-    <Transition
-      enter-active-class="tw:transition-opacity tw:duration-200 tw:ease-in-out"
-      leave-active-class="tw:transition-opacity tw:duration-200 tw:ease-in-out"
-      enter-from-class="tw:opacity-0"
-      leave-to-class="tw:opacity-0"
-      mode="out-in"
-      appear
+    <div
+      class="tw:w-full"
+      :class="{
+        'tw:pointer-events-none tw:absolute tw:inset-0 tw:overflow-hidden tw:opacity-0':
+          showLoadingOverlay,
+      }"
+      :aria-hidden="showLoadingOverlay"
     >
-      <v-row
-        :key="gridKey"
-        :no-gutters="slotLayout === 'default' || slotLayout === 'full'"
-        class="tw:max-w-full tw:self-start"
-        :class="{ 'tw:h-full': slotLayout === 'full' }"
+      <Transition
+        enter-active-class="tw:transition-opacity tw:duration-200 tw:ease-in-out"
+        leave-active-class="tw:transition-opacity tw:duration-200 tw:ease-in-out"
+        enter-from-class="tw:opacity-0"
+        leave-to-class="tw:opacity-0"
+        mode="out-in"
+        appear
       >
+        <v-row
+          :key="gridKey"
+          :no-gutters="slotLayout === 'default' || slotLayout === 'full'"
+          class="tw:max-w-full tw:self-start"
+          :class="{ 'tw:h-full': slotLayout === 'full' }"
+        >
         <v-col
           v-for="(column, colIndex) in props.widgetsLayout"
           :key="colIndex"
@@ -75,6 +85,25 @@
           </v-row>
         </v-col>
       </v-row>
+      </Transition>
+    </div>
+
+    <Transition
+      enter-active-class="tw:transition-opacity tw:duration-200 tw:ease-in-out"
+      leave-active-class="tw:transition-opacity tw:duration-200 tw:ease-in-out"
+      enter-from-class="tw:opacity-0"
+      leave-to-class="tw:opacity-0"
+    >
+      <div
+        v-if="showLoadingOverlay"
+        class="tw:absolute tw:inset-0 tw:z-10 tw:flex tw:min-h-[200px] tw:items-center tw:justify-center"
+        :style="{ background: 'rgb(var(--v-theme-surface))' }"
+      >
+        <CompositionLoadingState
+          :size="loadingSize"
+          :stroke-width="loadingStrokeWidth"
+        />
+      </div>
     </Transition>
   </div>
 </template>
@@ -87,26 +116,41 @@ import {
   ref,
   h,
   computed,
+  onMounted,
   onUnmounted,
   nextTick,
+  provide,
+  toRef,
   type Component,
+  type ComponentPublicInstance,
 } from "vue"
 import { widgetLoader } from "@racletteOrchestrator/helpers/widgetLoader"
+import { WIDGET_SLOT_TYPE_KEY } from "@racletteOrchestrator/constants/widgetSlotType"
 import { useDisplay } from "vuetify"
 import useStateSubscriber from "@racletteOrchestrator/composables/useStateSubscriber"
 import useRouteState from "@racletteOrchestrator/composables/useRouteState"
 import { createWidgetLifecycleManager } from "@racletteOrchestrator/composables/useWidgetLifecycle"
 import { isDefined } from "@vueuse/core"
+import CompositionLoadingState from "@racletteOrchestrator/components/CompositionLoadingState.vue"
 
 const props = withDefaults(
   defineProps<{
     widgetsLayout: Composition["widgetsLayout"]
     slotType: string
     slotLayout: string
+    revealWhenReady?: boolean
+    loadingSize?: number | string
+    loadingStrokeWidth?: number | string
   }>(),
-  {},
+  {
+    revealWhenReady: false,
+    loadingSize: 32,
+    loadingStrokeWidth: 3,
+  },
 )
 
+provide(WIDGET_SLOT_TYPE_KEY, toRef(() => props.slotType))
+
 const { compositionSlots } = useRouteState()
 
 const currentRouteConfig = computed(() =>
@@ -157,13 +201,84 @@ const routeParams = computed(() => {
 // Create a reactive key that changes when widgetsLayout changes
 const gridKey = ref(0)
 
-// Calculate total number of widgets
-const totalWidgets = computed(() => {
-  return props.widgetsLayout.reduce((sum, column) => sum + column.length, 0)
-})
+// Calculate total number of widgets (only slots that actually contain a widget)
+const totalWidgets = computed(() =>
+  props.widgetsLayout.reduce(
+    (sum, column) => sum + column.filter((slot) => slot.widget).length,
+    0,
+  ),
+)
 
 // Widget lifecycle manager
-const lifecycleManager = ref(createWidgetLifecycleManager(totalWidgets.value))
+const lifecycleManager = ref(
+  createWidgetLifecycleManager(totalWidgets.value),
+)
+const allWidgetsReady = ref(false)
+let stopReadyWatch: (() => void) | null = null
+
+const attachLifecycleManager = (widgetCount: number) => {
+  stopReadyWatch?.()
+  const manager = createWidgetLifecycleManager(widgetCount)
+  stopReadyWatch = watch(
+    manager.allWidgetsReady,
+    (ready) => {
+      allWidgetsReady.value = ready
+    },
+    { immediate: true },
+  )
+  lifecycleManager.value = manager
+}
+
+attachLifecycleManager(totalWidgets.value)
+
+const isContentReady = computed(
+  () =>
+    !props.revealWhenReady ||
+    totalWidgets.value === 0 ||
+    allWidgetsReady.value,
+)
+
+const showLoadingOverlay = computed(
+  () => props.revealWhenReady && !isContentReady.value,
+)
+
+const resolveWidgetElement = (
+  target: Element | ComponentPublicInstance | null,
+): HTMLElement | null => {
+  if (!target) {
+    return null
+  }
+
+  if (target instanceof HTMLElement) {
+    return target
+  }
+
+  const root = target.$el
+  if (root instanceof HTMLElement) {
+    return root
+  }
+
+  if (root instanceof Text && root.parentElement instanceof HTMLElement) {
+    return root.parentElement
+  }
+
+  return null
+}
+
+const isWidgetLoadingPlaceholder = (
+  target: Element | ComponentPublicInstance | null,
+): boolean => {
+  if (!target || target instanceof HTMLElement) {
+    return false
+  }
+
+  const componentName =
+    target.$.type?.name ?? (target.$options?.name as string | undefined)
+
+  return (
+    componentName === "LoadingWidgetState" || componentName === "ErrorWidgetState"
+  )
+}
 
 // Widget component cache
 const widgetComponentCache = new Map<string, Component>()
@@ -182,29 +297,43 @@ const getSlotWidget = (widget: WidgetBase) => {
           const { onAllWidgetsReady, onWidgetRendered, onWidgetUnmounted } =
             lifecycleManager.value.createLifecycleHooks(widget.uuid)
 
+          const widgetRoot = ref<Element | ComponentPublicInstance | null>(null)
+
+          const reportRendered = () => {
+            nextTick(() => {
+              const instance = widgetRoot.value
+              if (isWidgetLoadingPlaceholder(instance)) {
+                return
+              }
+
+              const element = resolveWidgetElement(instance)
+              if (element) {
+                onWidgetRendered(element)
+              }
+            })
+          }
+
+          onMounted(reportRendered)
+
           onUnmounted(() => {
             onWidgetUnmounted()
           })
 
-          // Pass lifecycle hook to the component as a prop
-          const enhancedProps = {
-            ...props,
-            onAllWidgetsReady,
-            ref: (el: any) => {
-              if (el) {
-                // Element is mounted, observe it
-                nextTick(() => {
-                  // Get the actual DOM element
-                  const element = el.$el || el
-                  if (element instanceof HTMLElement) {
-                    onWidgetRendered(element)
+          return () =>
+            h(
+              originalComponent,
+              {
+                ...props,
+                onAllWidgetsReady,
+                ref: (instance: Element | ComponentPublicInstance | null) => {
+                  widgetRoot.value = instance
+                  if (instance) {
+                    reportRendered()
                   }
-                })
-              }
-            },
-          }
-
-          return () => h(originalComponent, enhancedProps, context.slots)
+                },
+              },
+              context.slots,
+            )
         },
       }
 
@@ -243,12 +372,15 @@ watch(
     // Clear component cache to force re-wrapping with new lifecycle manager
     widgetComponentCache.clear()
 
-    // Create new lifecycle manager with updated widget count
-    lifecycleManager.value = createWidgetLifecycleManager(totalWidgets.value)
+    attachLifecycleManager(totalWidgets.value)
 
     // Trigger grid transition
     gridKey.value++
   },
   { deep: true },
 )
+
+onUnmounted(() => {
+  stopReadyWatch?.()
+})
 </script>