@ssi-lib/loading
v1.0.3
Published
Screen loader ligero — eventos globales y marcador DOM
Readme
@ssi-lib/loading
Screen loader ligero para hosts React / Module Federation. Sin dependencias.
Escucha dos fuentes y muestra un overlay compartido:
- Evento
app:ssi-loadingcon{ active, message } - Marcador DOM
#mfe-loading(opcional, activo por defecto)
Instalación
npm install @ssi-lib/loading1. Básico — mínimo para funcionar
En el <head> del index.html, antes de que React monte:
<script type="module">
import { initSsiLoadingLib } from '@ssi-lib/loading';
initSsiLoadingLib();
</script>Desde cualquier parte de la app (con import):
import { loading } from '@ssi-lib/loading';
loading(true); // muestra spinner
loading(false); // oculta2. Con mensaje
El mensaje admite HTML (innerHTML):
loading(true, '<p>Guardando pedido...</p>');
loading(false);3. Sin importar la librería — evento en window
Útil en MFEs remotos o scripts que no tienen la dependencia:
window.dispatchEvent(
new CustomEvent('app:ssi-loading', {
detail: { active: true, message: '<p>Procesando...</p>' },
}),
);
window.dispatchEvent(
new CustomEvent('app:ssi-loading', {
detail: { active: false },
}),
);4. Canal propio
<script type="module">
import { initSsiLoadingLib, loading } from '@ssi-lib/loading';
initSsiLoadingLib({ channel: 'vivabox' });
</script>loading() emite en el canal activo:
vivabox → { active, message }5. Sin observer de #mfe-loading
Solo eventos, sin MutationObserver:
initSsiLoadingLib({ observeMarker: false });6. Diseño custom
HTML y CSS propios del cliente. Incluye #ssi-msg si quieres mostrar el message del evento:
<script type="module">
import { initSsiLoadingLib } from '@ssi-lib/loading';
initSsiLoadingLib({
html: '<div class="my-ring"></div><div id="ssi-msg"></div>',
css: `
#ssi-loading { background: #0f172a; }
.my-ring {
width: 48px; height: 48px;
border: 4px solid #fff3;
border-top-color: #fff;
border-radius: 50%;
animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
`,
});
</script>Sin html / css → spinner por defecto.
7. Completo — host con Module Federation
index.html
<head>
<script type="module">
import { initSsiLoadingLib } from '@ssi-lib/loading';
initSsiLoadingLib();
</script>
</head>Carga de MFE (@ssi-lib/mf-loader)
LoadComponent inserta <div id="mfe-loading" /> mientras carga el remoto. La librería lo detecta y muestra el overlay automáticamente.
import { LoadComponent } from '@ssi-lib/mf-loader';
<LoadComponent
lazyElement={{ mfe: 'commonsManagementMfe', component: 'PartyIndividualForm' }}
/>Operación async en el host
import { loading } from '@ssi-lib/loading';
async function save() {
loading(true, '<p>Guardando...</p>');
try {
await fetch('/api/save', { method: 'POST' });
} finally {
loading(false);
}
}Init con todas las opciones
initSsiLoadingLib({
channel: 'app:ssi-loading', // default
observeMarker: true, // default — escucha #mfe-loading
html: '...', // opcional
css: '...', // opcional
});Comportamiento
El overlay se muestra si cualquiera de las dos fuentes está activa:
evento active: true ──┐
├── overlay ON
#mfe-loading existe ──┘
evento active: false → apaga solo la fuente evento
quitar #mfe-loading → apaga solo la fuente DOM
overlay OFF cuando ambas están inactivasAPI
| Función | Descripción |
|---------|-------------|
| initSsiLoadingLib(opts?) | Conecta al canal y opcionalmente al observer |
| destroySsiLoadingLib() | Quita listeners, observer y overlay |
| loading(active, message?) | Emite el evento del canal activo |
InitOptions
| Campo | Default | Descripción |
|-------|---------|-------------|
| channel | app:ssi-loading | Nombre del evento en window |
| observeMarker | true | Observar #mfe-loading en el DOM |
| html | spinner built-in | HTML del overlay |
| css | estilos built-in | CSS inyectado en <head> |
Build
npm run build
npm run dev