mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-08-26 19:12:50 +00:00
loader UI improvements
This commit is contained in:
Estifo77
@@ -4,235 +4,138 @@ export interface MaritimeLoaderProps extends Omit<
|
||||
ComponentPropsWithoutRef<"span">,
|
||||
"children" | "color"
|
||||
> {
|
||||
/** Standalone size. Mantine's Loader size is used automatically when omitted. */
|
||||
/** Size in pixels or CSS string. Defaults to 80. */
|
||||
size?: number | string;
|
||||
/** Standalone CSS color. Mantine's Loader color is used automatically when omitted. */
|
||||
/** Primary accent color. Defaults to EMA Ocean Blue (#0284C7). */
|
||||
color?: string;
|
||||
/** Accessible status text (aria-label only — renders no visible text). */
|
||||
/** Visual variant: 'full' (emblem + orbital radar) or 'compact' (sleek inline spinner). */
|
||||
variant?: "full" | "compact";
|
||||
/** Accessible label. */
|
||||
label?: string;
|
||||
ref?: Ref<HTMLSpanElement>;
|
||||
}
|
||||
|
||||
const styles = `
|
||||
.ema-loader {
|
||||
.ema-pro-loader {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: calc(var(--ema-size, var(--loader-size, 80px)) * 1.88);
|
||||
color: var(--ema-color, var(--loader-color, #075985));
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ema-loader__svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--ema-size, var(--loader-size, 80px));
|
||||
height: var(--ema-size, var(--loader-size, 80px));
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ema-pro-loader--full {
|
||||
width: calc(var(--ema-size, var(--loader-size, 80px)) * 1.15);
|
||||
height: calc(var(--ema-size, var(--loader-size, 80px)) * 1.15);
|
||||
}
|
||||
|
||||
.ema-pro-loader__stage {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* --- Glowing Ambient Backdrop --- */
|
||||
.ema-pro-loader__glow {
|
||||
position: absolute;
|
||||
inset: 10%;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(2, 132, 199, 0.28) 0%, rgba(14, 165, 233, 0.08) 55%, transparent 75%);
|
||||
filter: blur(8px);
|
||||
animation: ema-glow-pulse 3s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
/* --- SVG Overlay & Ring Animations --- */
|
||||
.ema-pro-loader__svg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
filter: drop-shadow(
|
||||
0 calc(var(--ema-size, var(--loader-size, 80px)) * 0.035)
|
||||
calc(var(--ema-size, var(--loader-size, 80px)) * 0.04)
|
||||
rgb(7 39 58 / 18%)
|
||||
);
|
||||
}
|
||||
|
||||
.ema-loader__ship {
|
||||
transform-box: fill-box;
|
||||
transform-origin: 50% 82%;
|
||||
animation: ema-ship-float 2.55s cubic-bezier(0.45, 0, 0.55, 1) infinite;
|
||||
}
|
||||
|
||||
.ema-loader__shadow {
|
||||
fill: currentColor;
|
||||
opacity: 0.12;
|
||||
.ema-pro-loader__ring-outer {
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
animation: ema-shadow-breathe 2.55s cubic-bezier(0.45, 0, 0.55, 1) infinite;
|
||||
animation: ema-spin-cw 16s linear infinite;
|
||||
}
|
||||
|
||||
.ema-loader__deck {
|
||||
fill: currentColor;
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
.ema-loader__superstructure > path:first-child,
|
||||
.ema-loader__bridge-top {
|
||||
fill: #f8fbfc;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2.4;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.ema-loader__bridge-top { stroke-width: 2; }
|
||||
|
||||
.ema-loader__window {
|
||||
fill: #bfe9ff;
|
||||
stroke: currentColor;
|
||||
stroke-width: 0.7;
|
||||
}
|
||||
|
||||
.ema-loader__cabin-line {
|
||||
fill: currentColor;
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.ema-loader__funnel > path:first-child {
|
||||
fill: #eef3f5;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.ema-loader__green { fill: #078930; }
|
||||
.ema-loader__yellow { fill: #fcd116; }
|
||||
.ema-loader__red { fill: #da121a; }
|
||||
|
||||
.ema-loader__mast {
|
||||
fill: currentColor;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.8;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.ema-loader__flag-pole {
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.7;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.ema-loader__flag {
|
||||
.ema-pro-loader__ring-inner {
|
||||
transform-box: fill-box;
|
||||
transform-origin: left center;
|
||||
animation: ema-flag-wave 0.95s ease-in-out infinite alternate;
|
||||
transform-origin: center;
|
||||
animation: ema-spin-ccw 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||||
}
|
||||
|
||||
.ema-loader__hull {
|
||||
fill: #f8fbfc;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.4;
|
||||
stroke-linejoin: round;
|
||||
.ema-pro-loader__sonar-wave {
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
animation: ema-sonar-expand 2.6s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
|
||||
}
|
||||
|
||||
.ema-loader__lower-hull {
|
||||
fill: currentColor;
|
||||
opacity: 0.92;
|
||||
.ema-pro-loader__core-logo {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 54%;
|
||||
height: 54%;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 4px 10px rgba(11, 25, 44, 0.25));
|
||||
animation: ema-logo-float 3.5s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.ema-loader__waterline {
|
||||
fill: none;
|
||||
stroke: rgb(255 255 255 / 52%);
|
||||
stroke-width: 2.4;
|
||||
stroke-linecap: round;
|
||||
.ema-pro-loader__center-sync {
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
animation: ema-spin-cw 3s linear infinite;
|
||||
}
|
||||
|
||||
.ema-loader__bow-highlight {
|
||||
fill: none;
|
||||
stroke: rgb(255 255 255 / 46%);
|
||||
stroke-width: 2.3;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
/* --- Keyframe Animations --- */
|
||||
@keyframes ema-spin-cw {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.ema-loader__portholes {
|
||||
fill: #d7f2ff;
|
||||
stroke: currentColor;
|
||||
stroke-width: 0.8;
|
||||
@keyframes ema-spin-ccw {
|
||||
from { transform: rotate(360deg); }
|
||||
to { transform: rotate(0deg); }
|
||||
}
|
||||
|
||||
.ema-loader__cargo path {
|
||||
fill: none;
|
||||
stroke: rgb(255 255 255 / 22%);
|
||||
stroke-width: 1;
|
||||
@keyframes ema-glow-pulse {
|
||||
0% { transform: scale(0.92); opacity: 0.5; }
|
||||
100% { transform: scale(1.12); opacity: 0.9; }
|
||||
}
|
||||
|
||||
.ema-loader__container-dark rect { fill: #3f4a52; }
|
||||
.ema-loader__container-muted rect { fill: #7d8991; }
|
||||
.ema-loader__container-steel rect { fill: #59656d; }
|
||||
.ema-loader__container-light rect { fill: #aab2b8; }
|
||||
.ema-loader__container-medium rect { fill: #6c7880; }
|
||||
|
||||
.ema-loader__water-back,
|
||||
.ema-loader__water-front,
|
||||
.ema-loader__foam {
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
@keyframes ema-sonar-expand {
|
||||
0% { transform: scale(0.65); opacity: 0.9; stroke-width: 3; }
|
||||
60% { opacity: 0.35; }
|
||||
100% { transform: scale(1.4); opacity: 0; stroke-width: 0.5; }
|
||||
}
|
||||
|
||||
.ema-loader__water-back {
|
||||
stroke: currentColor;
|
||||
stroke-width: 5;
|
||||
opacity: 0.28;
|
||||
stroke-dasharray: 58 12;
|
||||
animation: ema-water-back 2.8s linear infinite;
|
||||
}
|
||||
|
||||
.ema-loader__water-front {
|
||||
stroke: currentColor;
|
||||
stroke-width: 6;
|
||||
opacity: 0.55;
|
||||
stroke-dasharray: 70 10;
|
||||
animation: ema-water-front 1.9s linear infinite;
|
||||
}
|
||||
|
||||
.ema-loader__foam {
|
||||
stroke: rgb(255 255 255 / 78%);
|
||||
stroke-width: 3;
|
||||
stroke-dasharray: 11 7;
|
||||
animation: ema-foam-drift 1.65s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes ema-ship-float {
|
||||
0%, 100% { transform: translateY(1.5px) rotate(-0.65deg); }
|
||||
50% { transform: translateY(-3px) rotate(0.65deg); }
|
||||
}
|
||||
|
||||
@keyframes ema-shadow-breathe {
|
||||
0%, 100% { transform: scaleX(1.02); opacity: 0.14; }
|
||||
50% { transform: scaleX(0.9); opacity: 0.08; }
|
||||
}
|
||||
|
||||
@keyframes ema-flag-wave {
|
||||
from { transform: skewY(-3deg) scaleX(0.94); }
|
||||
to { transform: skewY(3deg) scaleX(1.04); }
|
||||
}
|
||||
|
||||
@keyframes ema-water-back {
|
||||
to { stroke-dashoffset: -140; }
|
||||
}
|
||||
|
||||
@keyframes ema-water-front {
|
||||
to { stroke-dashoffset: 160; }
|
||||
}
|
||||
|
||||
@keyframes ema-foam-drift {
|
||||
to { stroke-dashoffset: -36; }
|
||||
@keyframes ema-logo-float {
|
||||
0% { transform: translateY(1px) scale(0.98); }
|
||||
100% { transform: translateY(-2px) scale(1.02); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ema-loader__ship,
|
||||
.ema-loader__shadow,
|
||||
.ema-loader__flag,
|
||||
.ema-loader__water-back,
|
||||
.ema-loader__water-front,
|
||||
.ema-loader__foam {
|
||||
animation: none;
|
||||
.ema-pro-loader__ring-outer,
|
||||
.ema-pro-loader__ring-inner,
|
||||
.ema-pro-loader__sonar-wave,
|
||||
.ema-pro-loader__core-logo,
|
||||
.ema-pro-loader__glow,
|
||||
.ema-pro-loader__center-sync {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.ema-loader__green,
|
||||
.ema-loader__yellow,
|
||||
.ema-loader__red,
|
||||
.ema-loader__container-dark rect,
|
||||
.ema-loader__container-muted rect,
|
||||
.ema-loader__container-steel rect,
|
||||
.ema-loader__container-light rect,
|
||||
.ema-loader__container-medium rect {
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
`;
|
||||
[data-mantine-color-scheme='dark'] .ema-pro-loader__glow {
|
||||
background: radial-gradient(circle, rgba(56, 189, 248, 0.35) 0%, rgba(2, 132, 199, 0.12) 60%, transparent 80%);
|
||||
}
|
||||
`;
|
||||
|
||||
function toCssSize(value: number | string | undefined) {
|
||||
return typeof value === "number" ? `${value}px` : value;
|
||||
@@ -241,7 +144,8 @@ function toCssSize(value: number | string | undefined) {
|
||||
export function MaritimeLoader({
|
||||
size,
|
||||
color,
|
||||
label = "Loading maritime services",
|
||||
variant = "full",
|
||||
label = "Ethiopian Maritime Authority Loading",
|
||||
className,
|
||||
style,
|
||||
ref,
|
||||
@@ -257,166 +161,151 @@ export function MaritimeLoader({
|
||||
<span
|
||||
{...props}
|
||||
ref={ref}
|
||||
className={["ema-loader", className].filter(Boolean).join(" ")}
|
||||
className={[
|
||||
"ema-pro-loader",
|
||||
variant === "full" ? "ema-pro-loader--full" : "ema-pro-loader--compact",
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
style={cssVariables}
|
||||
role="status"
|
||||
aria-label={label}
|
||||
>
|
||||
<style href="ema-maritime-loader" precedence="low">
|
||||
<style href="ema-maritime-loader-v3" precedence="low">
|
||||
{styles}
|
||||
</style>
|
||||
|
||||
<svg
|
||||
className="ema-loader__svg"
|
||||
viewBox="0 0 260 138"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
>
|
||||
<g className="ema-loader__shadow">
|
||||
<ellipse cx="132" cy="113" rx="78" ry="7" />
|
||||
</g>
|
||||
<div className="ema-pro-loader__stage">
|
||||
{/* Soft Ambient Radial Light Aura */}
|
||||
<div className="ema-pro-loader__glow" />
|
||||
|
||||
<g className="ema-loader__ship">
|
||||
<g className="ema-loader__cargo">
|
||||
<g className="ema-loader__container-dark">
|
||||
<rect x="60" y="54" width="27" height="17" rx="1.5" />
|
||||
<path d="M66 56v13M73 56v13M80 56v13" />
|
||||
</g>
|
||||
<g className="ema-loader__container-steel">
|
||||
<rect x="89" y="54" width="27" height="17" rx="1.5" />
|
||||
<path d="M95 56v13M102 56v13M109 56v13" />
|
||||
</g>
|
||||
<g className="ema-loader__container-light">
|
||||
<rect x="118" y="54" width="27" height="17" rx="1.5" />
|
||||
<path d="M124 56v13M131 56v13M138 56v13" />
|
||||
</g>
|
||||
<g className="ema-loader__container-medium">
|
||||
<rect x="147" y="54" width="27" height="17" rx="1.5" />
|
||||
<path d="M153 56v13M160 56v13M167 56v13" />
|
||||
</g>
|
||||
<g className="ema-loader__container-dark">
|
||||
<rect x="76" y="35" width="27" height="17" rx="1.5" />
|
||||
<path d="M82 37v13M89 37v13M96 37v13" />
|
||||
</g>
|
||||
<g className="ema-loader__container-muted">
|
||||
<rect x="105" y="35" width="27" height="17" rx="1.5" />
|
||||
<path d="M111 37v13M118 37v13M125 37v13" />
|
||||
</g>
|
||||
<g className="ema-loader__container-dark">
|
||||
<rect x="134" y="35" width="27" height="17" rx="1.5" />
|
||||
<path d="M140 37v13M147 37v13M154 37v13" />
|
||||
</g>
|
||||
</g>
|
||||
{/* Precision Orbital Rings & Sonar Radar SVG */}
|
||||
<svg
|
||||
className="ema-pro-loader__svg"
|
||||
viewBox="0 0 120 120"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
>
|
||||
<defs>
|
||||
{/* Ethiopian Maritime Brand Gradients */}
|
||||
<linearGradient id="ema-ring-grad-1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="#0284C7" />
|
||||
<stop offset="50%" stopColor="#38BDF8" />
|
||||
<stop offset="100%" stopColor="#078930" />
|
||||
</linearGradient>
|
||||
|
||||
<path className="ema-loader__deck" d="M42 72H214l-4 6H48z" />
|
||||
<linearGradient id="ema-ring-grad-2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="#F59E0B" />
|
||||
<stop offset="50%" stopColor="#D4AF37" />
|
||||
<stop offset="100%" stopColor="#FCD116" />
|
||||
</linearGradient>
|
||||
|
||||
<g className="ema-loader__superstructure">
|
||||
<path d="M174 41h27l10 31h-42z" />
|
||||
<path className="ema-loader__bridge-top" d="M178 32h20l5 9h-27z" />
|
||||
<rect
|
||||
className="ema-loader__window"
|
||||
x="179"
|
||||
y="45"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1"
|
||||
/>
|
||||
<rect
|
||||
className="ema-loader__window"
|
||||
x="188"
|
||||
y="45"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1"
|
||||
/>
|
||||
<rect
|
||||
className="ema-loader__window"
|
||||
x="197"
|
||||
y="45"
|
||||
width="7"
|
||||
height="7"
|
||||
rx="1"
|
||||
/>
|
||||
<rect
|
||||
className="ema-loader__cabin-line"
|
||||
x="180"
|
||||
y="58"
|
||||
width="20"
|
||||
height="2.5"
|
||||
rx="1.25"
|
||||
/>
|
||||
</g>
|
||||
<linearGradient id="ema-sonar-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#38BDF8" stopOpacity="0.8" />
|
||||
<stop offset="100%" stopColor="#0284C7" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<g className="ema-loader__funnel">
|
||||
<path d="M166 25h10l3 17h-15z" />
|
||||
<path
|
||||
className="ema-loader__green"
|
||||
d="M166.9 29h9.9l.6 3.5h-11.1z"
|
||||
/>
|
||||
<path
|
||||
className="ema-loader__yellow"
|
||||
d="M166.2 32.5h11.2l.6 3.5h-12.4z"
|
||||
/>
|
||||
<path
|
||||
className="ema-loader__red"
|
||||
d="M165.6 36h12.4l.6 3.5h-13.6z"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<g className="ema-loader__mast">
|
||||
<path d="M194 31V12M188 20h12M194 13l11 8M194 13l-9 8" />
|
||||
<circle cx="194" cy="11" r="2" />
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<path className="ema-loader__flag-pole" d="M184 20V8" />
|
||||
<g className="ema-loader__flag">
|
||||
<path
|
||||
className="ema-loader__green"
|
||||
d="M184 8c7-3 11 3 18 0v4c-7 3-11-3-18 0z"
|
||||
/>
|
||||
<path
|
||||
className="ema-loader__yellow"
|
||||
d="M184 12c7-3 11 3 18 0v4c-7 3-11-3-18 0z"
|
||||
/>
|
||||
<path
|
||||
className="ema-loader__red"
|
||||
d="M184 16c7-3 11 3 18 0v4c-7 3-11-3-18 0z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<path
|
||||
className="ema-loader__hull"
|
||||
d="M28 76h205l-15 18c-8 10-20 15-33 15H66c-13 0-24-5-31-15L23 80c-2-2 0-4 5-4z"
|
||||
{/* Sonar Pulsing Wave */}
|
||||
<circle
|
||||
className="ema-pro-loader__sonar-wave"
|
||||
cx="60"
|
||||
cy="60"
|
||||
r="42"
|
||||
fill="none"
|
||||
stroke="url(#ema-ring-grad-1)"
|
||||
/>
|
||||
<path
|
||||
className="ema-loader__lower-hull"
|
||||
d="M34 88h190l-6 6c-8 10-20 15-33 15H66c-13 0-24-5-31-15z"
|
||||
/>
|
||||
<path className="ema-loader__waterline" d="M36 87h188" />
|
||||
<path className="ema-loader__bow-highlight" d="M206 81l15 1-8 9" />
|
||||
|
||||
<g className="ema-loader__portholes">
|
||||
<circle cx="66" cy="91" r="2.2" />
|
||||
<circle cx="78" cy="91" r="2.2" />
|
||||
<circle cx="90" cy="91" r="2.2" />
|
||||
{/* Outer Precision Nautical Tick Ring */}
|
||||
<g className="ema-pro-loader__ring-outer">
|
||||
<circle
|
||||
cx="60"
|
||||
cy="60"
|
||||
r="54"
|
||||
fill="none"
|
||||
stroke="url(#ema-ring-grad-1)"
|
||||
strokeWidth="1.8"
|
||||
strokeDasharray="8 6 2 6"
|
||||
opacity="0.85"
|
||||
/>
|
||||
<circle
|
||||
cx="60"
|
||||
cy="60"
|
||||
r="48"
|
||||
fill="none"
|
||||
stroke="url(#ema-ring-grad-2)"
|
||||
strokeWidth="1"
|
||||
strokeDasharray="40 18"
|
||||
opacity="0.9"
|
||||
/>
|
||||
{/* 4 Cardinal Anchor Points */}
|
||||
<circle cx="60" cy="6" r="2.5" fill="#FCD116" />
|
||||
<circle cx="114" cy="60" r="2.5" fill="#0284C7" />
|
||||
<circle cx="60" cy="114" r="2.5" fill="#078930" />
|
||||
<circle cx="6" cy="60" r="2.5" fill="#DA121A" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g className="ema-loader__water-back">
|
||||
<path d="M3 112c17-8 30-8 47 0s30 8 47 0 30-8 47 0 30 8 47 0 30-8 47 0 30 8 47 0" />
|
||||
</g>
|
||||
<g className="ema-loader__water-front">
|
||||
<path d="M-8 121c19-9 34-9 53 0s34 9 53 0 34-9 53 0 34 9 53 0 34-9 53 0 34 9 53 0" />
|
||||
</g>
|
||||
<g className="ema-loader__foam">
|
||||
<path d="M29 106c13 4 25 5 38 3" />
|
||||
<path d="M200 108c14 1 24-1 35-5" />
|
||||
</g>
|
||||
</svg>
|
||||
{/* Inner Counter-Rotating Golden Ring */}
|
||||
<g className="ema-pro-loader__ring-inner">
|
||||
<circle
|
||||
cx="60"
|
||||
cy="60"
|
||||
r="39"
|
||||
fill="none"
|
||||
stroke="url(#ema-ring-grad-2)"
|
||||
strokeWidth="2"
|
||||
strokeDasharray="28 14"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<circle
|
||||
cx="60"
|
||||
cy="60"
|
||||
r="34"
|
||||
fill="none"
|
||||
stroke="#38BDF8"
|
||||
strokeWidth="1"
|
||||
strokeDasharray="4 8"
|
||||
opacity="0.6"
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Vector EMA Emblem Backup for Instant Render */}
|
||||
{variant === "compact" && (
|
||||
<g transform="translate(36, 36) scale(0.4)">
|
||||
<path
|
||||
d="M 60 10 L 110 100 L 85 100 L 60 48 L 35 100 L 10 100 Z"
|
||||
fill="url(#ema-ring-grad-1)"
|
||||
/>
|
||||
<circle
|
||||
className="ema-pro-loader__center-sync"
|
||||
cx="60"
|
||||
cy="64"
|
||||
r="12"
|
||||
fill="none"
|
||||
stroke="#FCD116"
|
||||
strokeWidth="3.5"
|
||||
strokeDasharray="14 8"
|
||||
/>
|
||||
</g>
|
||||
)}
|
||||
</svg>
|
||||
|
||||
{/* Official EMA Crest Logo Image */}
|
||||
<img
|
||||
src="/ema-logo.png"
|
||||
alt="Ethiopian Maritime Authority"
|
||||
className="ema-pro-loader__core-logo"
|
||||
onError={(e) => {
|
||||
// Fallback if image path is not resolving in dev iframe
|
||||
(e.target as HTMLElement).style.display = "none";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default MaritimeLoader;
|
||||
|
||||
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user