Tria/emaui
1
0
Fork 0
mirror of https://github.com/Tria-plc/emaui.git synced 2026-08-26 19:12:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement PageLoader component and register maritime loader as the default theme loader

Browse Source
This commit is contained in:
estifanos
2026-08-14 11:35:34 +00:00
parent 652503d1de
commit f31e75c3de
16 changed files with 219 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
apps/backoffice/index.html
View File

@@ -6,9 +6,76 @@
<link rel="icon" type="image/png" href="/ema-logo.png" />
<link rel="apple-touch-icon" href="/ema-logo.png" />
<title>EMA Backoffice</title>
<script>
// Apply the saved Mantine color scheme before paint to avoid a flash.
try {
var s = localStorage.getItem('mantine-color-scheme-value') || 'light';
document.documentElement.setAttribute('data-mantine-color-scheme', s);
} catch (e) {}
</script>
<style>
/* Boot splash — shown until React mounts into #root. Colors are
hardcoded (Mantine's default light/dark-7 body background) so the
splash never depends on the app's own stylesheet finishing its load. */
#ema-boot-splash {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}
html[data-mantine-color-scheme='dark'] #ema-boot-splash {
background: #242424;
}
#ema-boot-splash svg {
width: 140px;
height: auto;
color: #2563eb;
animation: ema-boot-pulse 1.6s ease-in-out infinite;
}
@keyframes ema-boot-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
#ema-boot-splash svg { animation: none; }
}
/* React has committed into #root once it has a child; hide the splash. */
#root:not(:empty) ~ #ema-boot-splash {
display: none;
}
</style>
</head>
<body>
<div id="root"></div>
<!--
Static boot splash. Kept intentionally minimal (hull, funnel, mast,
flag — no cargo containers, no animated water) since this markup can't
import React. Source of truth for the full animated version is
libs/ui/src/lib/components/MaritimeLoader.tsx.
-->
<div id="ema-boot-splash" role="status" aria-live="polite" aria-label="Loading">
<svg viewBox="0 0 260 138" aria-hidden="true" focusable="false">
<ellipse cx="132" cy="113" rx="78" ry="7" fill="currentColor" opacity="0.12" />
<path d="M42 72H214l-4 6H48z" fill="currentColor" opacity="0.82" />
<path d="M166 25h10l3 17h-15z" fill="#eef3f5" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
<path d="M166.9 29h9.9l.6 3.5h-11.1z" fill="#078930" />
<path d="M166.2 32.5h11.2l.6 3.5h-12.4z" fill="#fcd116" />
<path d="M165.6 36h12.4l.6 3.5h-13.6z" fill="#da121a" />
<path d="M194 31V12M188 20h12M194 13l11 8M194 13l-9 8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="194" cy="11" r="2" fill="currentColor" />
<path d="M184 20V8" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" />
<path d="M184 8c7-3 11 3 18 0v4c-7 3-11-3-18 0z" fill="#078930" />
<path d="M184 12c7-3 11 3 18 0v4c-7 3-11-3-18 0z" fill="#fcd116" />
<path d="M184 16c7-3 11 3 18 0v4c-7 3-11-3-18 0z" fill="#da121a" />
<path d="M28 76h205l-15 18c-8 10-20 15-33 15H66c-13 0-24-5-31-15L23 80c-2-2 0-4 5-4z" fill="#f8fbfc" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" />
<path d="M34 88h190l-6 6c-8 10-20 15-33 15H66c-13 0-24-5-31-15z" fill="currentColor" opacity="0.92" />
<path d="M36 87h188" fill="none" stroke="rgb(255 255 255 / 52%)" stroke-width="2.4" stroke-linecap="round" />
<path d="M206 81l15 1-8 9" fill="none" stroke="rgb(255 255 255 / 46%)" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>