@ews-admin/global-design-system 1.26.0 → 1.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ews-admin/global-design-system",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "description": "EWS Global Design System - Reusable components for EWS applications",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/SecureLoader/SecureLoader.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Lock } from "lucide-react";
+
+/**
+ * The loader is purely presentational: the caller decides when to render it
+ * (while the session is validated, fetched or terminated) and provides
+ * already-translated labels.
+ */
+export interface SecureLoaderProps {
+  label: string;
+  /** Extra line shown under the label. */
+  description?: string;
+}
+
+/**
+ * Full-screen loader (lock icon with a spinner) shown while the user's
+ * session is being checked.
+ */
+const SecureLoader: React.FC<SecureLoaderProps> = ({ label, description }) => (
+  <div
+    data-testid="secure-loader"
+    className="flex min-h-screen items-center justify-center bg-gray-100"
+  >
+    <div className="flex flex-col items-center rounded-lg bg-white p-6 shadow-lg">
+      <div className="relative">
+        <Lock className="h-16 w-16 text-gray-500" />
+        <div className="absolute bottom-2 right-1 h-6 w-6 animate-spin rounded-full border-4 border-gray-300 border-t-green-500"></div>
+      </div>
+      <p className="mt-4 text-lg text-gray-600">{label}</p>
+      {description && (
+        <p className="mt-2 text-sm text-gray-500">{description}</p>
+      )}
+    </div>
+  </div>
+);
+
+export default SecureLoader;

package/src/components/SecureLoader/index.ts

@@ -0,0 +1,2 @@
+export { default as SecureLoader } from "./SecureLoader";
+export type { SecureLoaderProps } from "./SecureLoader";

package/src/index.ts

@@ -52,6 +52,9 @@ export type { TagListProps } from "./components/TagList";
 export { PaymentDueBanner } from "./components/PaymentDueBanner";
 export type { PaymentDueBannerProps } from "./components/PaymentDueBanner";
 
+export { SecureLoader } from "./components/SecureLoader";
+export type { SecureLoaderProps } from "./components/SecureLoader";
+
 // Molecules
 export { SpecialtySearchAutocomplete } from "./molecules";
 export type { Specialty, SpecialtySearchAutocompleteProps } from "./molecules";