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>

4
apps/backoffice/src/app/features/seafarer-registry/pages/SeafarerRegistryPage/index.tsx
View File

@@ -137,7 +137,7 @@ function SeafarerDetailDrawer({
<Tabs.Panel value="sea-service" pt="sm">
{loadingSea ? (
<Loader size="sm" />
<Loader size="sm" type="oval" />
) : (seaService ?? []).length === 0 ? (
<Text size="sm" c="dimmed">
{t('seafarerRegistry.drawer.noSeaService', 'No sea-service records.')}
@@ -184,7 +184,7 @@ function SeafarerDetailDrawer({
<Tabs.Panel value="medical" pt="sm">
{loadingMedical ? (
<Loader size="sm" />
<Loader size="sm" type="oval" />
) : (medical ?? []).length === 0 ? (
<Text size="sm" c="dimmed">
{t('seafarerRegistry.drawer.noMedical', 'No medical certificates.')}

2
apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationQueuePage/index.tsx
View File

@@ -109,7 +109,7 @@ function VesselDetailDrawer({
</Text>
</Group>
{loadingIncidents ? (
<Loader size="sm" />
<Loader size="sm" type="oval" />
) : (incidents ?? []).length === 0 ? (
<Text size="sm" c="dimmed">
No incidents recorded.

7
apps/backoffice/src/app/providers/MantineThemeProvider.tsx
View File

@@ -1,11 +1,14 @@
import { MantineProvider } from '@mantine/core';
import { MantineProvider, mergeThemeOverrides } from '@mantine/core';
import { Notifications } from '@mantine/notifications';
import { emaTheme } from '@ema-platform/shared';
import { maritimeLoaderTheme } from '@ema-platform/ui';
import type { ReactNode } from 'react';
const theme = mergeThemeOverrides(emaTheme, maritimeLoaderTheme);
export function MantineThemeProvider({ children }: { children: ReactNode }) {
return (
<MantineProvider theme={emaTheme} defaultColorScheme="light">
<MantineProvider theme={theme} defaultColorScheme="light">
<Notifications position="top-right" />
{children}
</MantineProvider>

60
apps/portal/index.html
View File

@@ -13,9 +13,69 @@
document.documentElement.setAttribute('data-mantine-color-scheme', s);
} catch (e) {}
</script>
<style>
/* Boot splash — shown until React mounts into #root. Colors are
hardcoded (not CSS vars from portal.css) 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: #f5f8fc;
}
html[data-mantine-color-scheme='dark'] #ema-boot-splash {
background: #0e1521;
}
#ema-boot-splash svg {
width: 140px;
height: auto;
color: #3160b7;
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>

2
apps/portal/src/app/features/licensing/components/DocumentSlots.tsx
View File

@@ -175,7 +175,7 @@ export function DocumentSlots({
variant={uploaded ? 'light' : 'filled'}
leftSection={
busy === requirement.key ? (
<Loader size={12} />
<Loader size={12} type="oval" />
) : (
<IconFileUpload size={14} />
)

2
apps/portal/src/app/features/licensing/components/StaffEvidence.tsx
View File

@@ -74,7 +74,7 @@ export function StaffEvidence({ staffId, evidence, readOnly, onUploaded }: Props
disabled={readOnly || busy === item.docKey}
leftSection={
busy === item.docKey ? (
<Loader size={10} />
<Loader size={10} type="oval" />
) : uploaded ? (
<IconCheck size={12} />
) : undefined

2
apps/portal/src/app/features/profile/components/OperationsFormContent.tsx
View File

@@ -92,7 +92,7 @@ export function OperationsFormContent({
}
if (loadingTypes || loadingMine) {
return <Loader size="sm" />;
return <Loader size="sm" type="oval" />;
}
const removedNames = options

7
apps/portal/src/app/features/profile/components/ProfileFormContent.tsx
View File

@@ -1,6 +1,7 @@
import { Loader, Select, SimpleGrid, TextInput } from '@mantine/core';
import type { FieldErrors, UseFormRegister, UseFormSetValue, UseFormWatch, UseFormTrigger } from 'react-hook-form';
import { z } from 'zod';
import { useTranslation } from 'react-i18next';
import { AmharicDatePicker } from '@ema-platform/ui';
export const profileSchema = z.object({
@@ -39,11 +40,13 @@ export function ProfileFormContent({
professionsLoading,
professionOptions,
}: ProfileFormContentProps) {
const { t } = useTranslation();
return (
<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
<Select
label="Profession"
placeholder={professionsLoading ? 'Loading...' : 'Select'}
placeholder={professionsLoading ? t('common.loading', 'Loading…') : 'Select'}
required
data={professionOptions}
error={errors.professionId?.message}
@@ -53,7 +56,7 @@ export function ProfileFormContent({
name="professionId"
searchable
disabled={professionsLoading}
rightSection={professionsLoading ? <Loader size="xs" /> : undefined}
rightSection={professionsLoading ? <Loader size="xs" type="oval" /> : undefined}
/>
<TextInput
label="First Name"

2
apps/portal/src/app/features/seafarer/pages/MySeaRecordsPage/index.tsx
View File

@@ -98,7 +98,7 @@ function EvidenceModal({
<Modal opened={Boolean(ownerId)} onClose={onClose} title="Evidence" centered>
<Stack>
{isLoading ? (
<Loader size="sm" />
<Loader size="sm" type="oval" />
) : files.length === 0 ? (
<Text size="sm" c="dimmed">
No evidence uploaded yet.

7
apps/portal/src/app/providers/MantineThemeProvider.tsx
View File

@@ -1,11 +1,14 @@
import { MantineProvider } from '@mantine/core';
import { MantineProvider, mergeThemeOverrides } from '@mantine/core';
import { Notifications } from '@mantine/notifications';
import { maritimeLoaderTheme } from '@ema-platform/ui';
import type { ReactNode } from 'react';
import { portalTheme } from '../theme/portalTheme';
const theme = mergeThemeOverrides(portalTheme, maritimeLoaderTheme);
export function MantineThemeProvider({ children }: { children: ReactNode }) {
return (
<MantineProvider theme={portalTheme} defaultColorScheme="light">
<MantineProvider theme={theme} defaultColorScheme="light">
<Notifications position="top-right" />
{children}
</MantineProvider>