ui phase 1

client/src/components/common/AppLoading/AppLoading.tsx

@@ -1,36 +1,36 @@
+'use client'
 import { FunctionComponent } from 'react';
-import { CircularProgress, CircularProgressProps, LinearProgress, Stack, StackProps } from '@mui/material';
-import { APP_LOADING_COLOR, APP_LOADING_SIZE, APP_LOADING_TYPE } from '@/components/config';
+import { keyframes } from '@emotion/react';
+import Stack, { StackProps } from '@mui/material/Stack';
+import AppIcon from '../AppIcon';
 
-interface Props extends StackProps {
-  color?: CircularProgressProps['color'];
-  size?: number | string;
-  type?: 'circular' | 'linear';
-  value?: number;
-}
+export type AppLoadingProps = StackProps;
+
+const breathe = keyframes`
+  0%, 100% { opacity: 0.55; transform: scale(0.92); }
+  50% { opacity: 1; transform: scale(1); }
+`;
 
 /**
- * Renders MI circular progress centered inside Stack
+ * The branded full-page loading splash — the Balinyaar mark with a subtle breathing motion, respecting
+ * `prefers-reduced-motion` (the animation only applies under the `no-preference` media query; a
+ * reduced-motion user sees a static, still-legible mark). Reserved for **true full-page waits** (the auth
+ * splash, a payment-gateway return, a route-level `Suspense` fallback) — inline/list loading should reach
+ * for a shaped skeleton (a co-located `<X.Skeleton />` twin) instead, never a bare spinner.
  * @component AppLoading
- * @prop {string} [size] - size of the progress component. Numbers means pixels, string can be '2.5rem'
  */
-const AppLoading: FunctionComponent<Props> = ({
-  color = APP_LOADING_COLOR,
-  size = APP_LOADING_SIZE,
-  type = APP_LOADING_TYPE,
-  value,
-  ...restOfProps
-}) => {
-  const alignItems = type === 'linear' ? undefined : 'center';
-  return (
-    <Stack sx={{ my: 2, alignItems }} {...restOfProps}>
-      {type === 'linear' ? (
-        <LinearProgress color={color} value={value} />
-      ) : (
-        <CircularProgress color={color} size={size} value={value} />
-      )}
+const AppLoading: FunctionComponent<AppLoadingProps> = ({ sx, ...rest }) => (
+  <Stack role="status" sx={{ my: 4, alignItems: 'center', justifyContent: 'center', ...sx }} {...rest}>
+    <Stack
+      sx={{
+        '@media (prefers-reduced-motion: no-preference)': {
+          animation: `${breathe} 1.6s ease-in-out infinite`,
+        },
+      }}
+    >
+      <AppIcon icon="logo" size={48} color="var(--bal-primary)" />
     </Stack>
-  );
-};
+  </Stack>
+);
 
 export default AppLoading;