applying loader on pages

libs/ui/src/lib/theme/maritime-loader-theme.ts

@@ -1,31 +1,47 @@
-import { Button, createTheme, Loader, type MantineLoaderComponent } from '@mantine/core';
+import {
+  ActionIcon,
+  Button,
+  createTheme,
+  Input,
+  Loader,
+  Select,
+  TextInput,
+  type MantineLoaderComponent,
+} from '@mantine/core';
 import { MaritimeLoader } from '../components/MaritimeLoader';
 
 /**
- * Registers the branded ship loader as the default Mantine `Loader` type, and
- * opts `Button`'s inline loading state back out to the stock oval — a 1.88:1
- * ship does not fit a button's loader slot.
- *
- * Merge into an app theme with `mergeThemeOverrides(appTheme, maritimeLoaderTheme)`
- * rather than importing this in `libs/shared`: `libs/ui` already depends on
- * `libs/shared`, so the reverse import would be circular.
+ * Registers the branded Ethiopian Maritime Authority loader as the default Mantine `Loader` type,
+ * sets prominent 80px size for page/section loaders, and opts inline control loaders
+ * (buttons, inputs, select fields) back out to the compact oval spinner.
  */
 export const maritimeLoaderTheme = createTheme({
   components: {
     Loader: Loader.extend({
       defaultProps: {
-        // Mantine types custom loaders as ForwardRefExoticComponent; a plain
-        // function component satisfies the runtime contract (it forwards a
-        // ref as a normal prop under React 19) but not the structural type.
         loaders: {
           ...Loader.defaultLoaders,
           maritime: MaritimeLoader as unknown as MantineLoaderComponent,
         },
         type: 'maritime',
+        size: 80,
       },
     }),
     Button: Button.extend({
       defaultProps: { loaderProps: { type: 'oval' } },
     }),
+    ActionIcon: ActionIcon.extend({
+      defaultProps: { loaderProps: { type: 'oval' } },
+    }),
+    Input: Input.extend({
+      defaultProps: { loaderProps: { type: 'oval' } },
+    }),
+    TextInput: TextInput.extend({
+      defaultProps: { loaderProps: { type: 'oval' } },
+    }),
+    Select: Select.extend({
+      defaultProps: { loaderProps: { type: 'oval' } },
+    }),
   },
 });
+