loader UI improvements

libs/ui/src/lib/feedback/PageLoader.tsx

@@ -1,26 +1,129 @@
-import { Center, Loader, Stack, Text } from '@mantine/core';
+import { Center, Box, Stack, Text, useMantineColorScheme } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
+import { MaritimeLoader } from '../components/MaritimeLoader';
 
 interface PageLoaderProps {
   /** Visible + accessible label. Defaults to the shared i18n "loading" string. */
   label?: string;
+  /** Subtitle or secondary detail string. */
+  subtitle?: string;
   /** Container height. Defaults to a full-page fill. */
   height?: number | string;
+  /** Show framed executive card backdrop (default: true). */
+  framed?: boolean;
 }
 
-/** The full-page/section loading state every screen should use instead of a bare `<Loader />`. */
-export function PageLoader({ label, height = '60vh' }: PageLoaderProps) {
+/** The full-page/section loading state every screen should use. */
+export function PageLoader({
+  label,
+  subtitle,
+  height = '60vh',
+  framed = true,
+}: PageLoaderProps) {
   const { t } = useTranslation();
-  const resolvedLabel = label ?? t('loading', 'Loading…');
+  const { colorScheme } = useMantineColorScheme();
+  const isDark = colorScheme === 'dark';
+
+  const resolvedLabel = label ?? t('loading', 'Loading Maritime Services…');
 
   return (
-    <Center h={height}>
-      <Stack align="center" gap="xs">
-        <Loader size={64} aria-label={resolvedLabel} />
-        <Text c="dimmed" size="sm">
-          {resolvedLabel}
-        </Text>
-      </Stack>
+    <Center h={height} w="100%" p="md">
+      <Box
+        style={{
+          position: 'relative',
+          padding: framed ? '2rem 3rem' : '1rem',
+          borderRadius: framed ? '1.25rem' : '0',
+          background: framed
+            ? isDark
+              ? 'rgba(15, 23, 42, 0.75)'
+              : 'rgba(255, 255, 255, 0.85)'
+            : 'transparent',
+          backdropFilter: framed ? 'blur(12px)' : 'none',
+          boxShadow: framed
+            ? isDark
+              ? '0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08)'
+              : '0 20px 40px rgba(11, 25, 44, 0.08), 0 0 0 1px rgba(15, 44, 89, 0.08)'
+            : 'none',
+          transition: 'all 0.3s ease',
+          maxWidth: '440px',
+          width: '100%',
+        }}
+      >
+        <Stack align="center" gap="md">
+          {/* Main Maritime Animated Loader */}
+          <MaritimeLoader size={110} variant="full" label={resolvedLabel} />
+
+          {/* Ethiopian Maritime Authority Branding Header */}
+          <Box style={{ textAlign: 'center' }}>
+            <Text
+              fw={700}
+              size="xs"
+              style={{
+                letterSpacing: '0.16em',
+                textTransform: 'uppercase',
+                background: 'linear-gradient(135deg, #0284C7 0%, #D4AF37 50%, #078930 100%)',
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+                marginBottom: '2px',
+              }}
+            >
+              ETHIOPIAN MARITIME AUTHORITY
+            </Text>
+            <Text
+              fw={500}
+              size="xs"
+              c="dimmed"
+              style={{ letterSpacing: '0.05em', marginBottom: '8px' }}
+            >
+              የኢትዮጵያ ማሪታይም ባለስልጣን
+            </Text>
+            <Text
+              fw={600}
+              size="md"
+              c={isDark ? 'gray.1' : 'navy.9'}
+              style={{ lineHeight: 1.3 }}
+            >
+              {resolvedLabel}
+            </Text>
+            {subtitle && (
+              <Text size="xs" c="dimmed" mt={4}>
+                {subtitle}
+              </Text>
+            )}
+          </Box>
+
+          {/* Animated Gold Shimmer Bar */}
+          <Box
+            style={{
+              width: '120px',
+              height: '3px',
+              borderRadius: '2px',
+              background: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(15,44,89,0.1)',
+              overflow: 'hidden',
+              position: 'relative',
+            }}
+          >
+            <Box
+              style={{
+                position: 'absolute',
+                top: 0,
+                bottom: 0,
+                width: '40%',
+                background: 'linear-gradient(90deg, #078930, #FCD116, #2563EB)',
+                borderRadius: '2px',
+                animation: 'ema-shimmer 1.8s infinite ease-in-out',
+              }}
+            />
+            <style>{`
+              @keyframes ema-shimmer {
+                0% { left: -40%; }
+                100% { left: 100%; }
+              }
+            `}</style>
+          </Box>
+        </Stack>
+      </Box>
     </Center>
   );
 }
+