@edc-motor/ui 0.5.18 → 0.5.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.5.18",
+  "version": "0.5.19",
   "description": "EdC Motor — componentes públicos Vue 3 + tokens SCSS para webs de juegos de mesa (paquete fuente: lo compila el consumidor con Vite)",
   "license": "GPL-3.0-only",
   "type": "module",

package/src/index.ts

@@ -53,6 +53,7 @@ export { default as LocaleSelector } from './components/LocaleSelector.vue'
 export { default as AppBreadcrumbs, type Crumb } from './components/AppBreadcrumbs.vue'
 export { default as PreviewGrid, type PreviewGridItem } from './components/PreviewGrid.vue'
 export { createApi, type CreateApiOptions } from './lib/createApi'
+export { watchSplash, dismissSplash, type WatchSplashOptions } from './lib/splash'
 export { useToast, type Toast } from './composables/useToast'
 export { useConfirm, type ConfirmOptions } from './composables/useConfirm'
 export { useTheme, type ThemeMode } from './composables/useTheme'

package/src/lib/splash.ts

@@ -0,0 +1,93 @@
+import type { AxiosInstance } from 'axios'
+
+// Splash de arranque. La SPA sirve un cascarón instantáneo y pide TODO lo
+// real (settings, menús, sesión, contenido de la vista) a la API después de
+// montar: hasta que responde, cada componente pinta su estado por defecto.
+// En local (API a ~1 ms) ese fotograma provisional no llega a verse; en
+// producción sí. El remedio: el index.html estático trae un velo a pantalla
+// completa (#edc-splash, HTML autosuficiente pintado desde el fotograma
+// cero, antes incluso de descargar el bundle) y este módulo lo retira
+// cuando el arranque termina de verdad.
+//
+// ¿Y cuándo termina «de verdad»? En vez de instrumentar cada vista, se
+// observa el cliente axios: se cuentan las peticiones en vuelo y el splash
+// cae en el PRIMER REPOSO DE RED (cero peticiones durante `quietMs`). Eso
+// cubre solo la cascada inicial —locales → settings → datos de la primera
+// vista, encadenados por microtareas que siempre ganan al temporizador— y
+// no exige tocar las vistas. Un tope (`maxWaitMs`) garantiza que una API
+// caída nunca deja el velo puesto.
+//
+// Uso (main.ts, ANTES de app.mount() — si se llama después, las peticiones
+// del onMounted ya habrían salido sin contar):
+//
+//   watchSplash({ api })
+//   app.mount('#app')
+
+const SPLASH_ID = 'edc-splash'
+
+export interface WatchSplashOptions {
+  /** Cliente(s) axios cuyas peticiones marcan el arranque (createApi). */
+  api?: AxiosInstance | AxiosInstance[]
+  /** Reposo de red que da el arranque por terminado (ms). */
+  quietMs?: number
+  /** Tope duro: el splash cae aunque la red siga ocupada o caída (ms). */
+  maxWaitMs?: number
+}
+
+/** Retira el splash con su fundido (idempotente; sin splash, no hace nada). */
+export function dismissSplash(): void {
+  const el = document.getElementById(SPLASH_ID)
+  if (!el || el.classList.contains('edc-splash--done')) return
+  el.classList.add('edc-splash--done')
+  const remove = () => el.remove()
+  el.addEventListener('transitionend', remove, { once: true })
+  // Por si no hay transición (prefers-reduced-motion, CSS recortado).
+  setTimeout(remove, 600)
+}
+
+/** Observa el arranque y retira el splash en el primer reposo de red. */
+export function watchSplash(options: WatchSplashOptions = {}): void {
+  if (typeof document === 'undefined') return
+  if (!document.getElementById(SPLASH_ID)) return
+
+  const quietMs = options.quietMs ?? 200
+  const maxWaitMs = options.maxWaitMs ?? 8000
+  const apis = Array.isArray(options.api) ? options.api : options.api ? [options.api] : []
+
+  let inflight = 0
+  let quietTimer: ReturnType<typeof setTimeout> | undefined
+
+  const done = () => {
+    clearTimeout(quietTimer)
+    // Doble rAF: el render definitivo llega a pintarse BAJO el velo antes
+    // del fundido (sin esto el fundido podría destapar un frame a medias).
+    requestAnimationFrame(() => requestAnimationFrame(dismissSplash))
+  }
+  const armQuiet = () => {
+    clearTimeout(quietTimer)
+    quietTimer = setTimeout(done, quietMs)
+  }
+
+  for (const api of apis) {
+    api.interceptors.request.use((config) => {
+      inflight++
+      clearTimeout(quietTimer)
+      return config
+    })
+    api.interceptors.response.use(
+      (response) => {
+        if (--inflight <= 0) armQuiet()
+        return response
+      },
+      (error) => {
+        if (--inflight <= 0) armQuiet()
+        return Promise.reject(error)
+      },
+    )
+  }
+
+  // Armado inicial: si el arranque no llega a pedir nada (o no se pasó
+  // `api`), el splash cae solo tras el primer reposo.
+  armQuiet()
+  setTimeout(dismissSplash, maxWaitMs)
+}