@baseplate-dev/ui-components 0.2.5 → 0.2.6

package/dist/components/ui/loader/loader.d.ts

@@ -1,10 +1,12 @@
 import type React from 'react';
 interface LoaderProps {
     className?: string;
+    delay?: number;
 }
 /**
  * Loader component that displays a 3-dot loading animation.
+ * Only shows after the specified delay (default: 300ms) to prevent flashing for quick operations.
  */
-declare function Loader({ className }: LoaderProps): React.ReactElement;
+declare function Loader({ className, delay }: LoaderProps): React.ReactElement;
 export { Loader };
 //# sourceMappingURL=loader.d.ts.map

package/dist/components/ui/loader/loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/loader/loader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,WAAW;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CAa9D;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/loader/loader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,UAAU,WAAW;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,KAAW,EAAE,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CAiC3E;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/ui/loader/loader.js

@@ -1,9 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { cn } from '#src/utils/index.js';
 /**
  * Loader component that displays a 3-dot loading animation.
+ * Only shows after the specified delay (default: 300ms) to prevent flashing for quick operations.
  */
-function Loader({ className }) {
+function Loader({ className, delay = 300 }) {
+    const [isVisible, setIsVisible] = useState(false);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setIsVisible(true);
+        }, delay);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [delay]);
+    if (!isVisible) {
+        return (_jsx("div", { className: cn('flex h-full items-center justify-center', className) }));
+    }
     return (_jsx("div", { className: cn('flex h-full items-center justify-center', className), role: "progressbar", children: _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("div", { className: "size-3 animate-pulse rounded-full bg-muted-foreground" }), _jsx("div", { className: "size-3 animate-pulse rounded-full bg-muted-foreground delay-300" }), _jsx("div", { className: "size-3 animate-pulse rounded-full bg-muted-foreground delay-[600ms]" })] }) }));
 }
 export { Loader };

package/dist/components/ui/loader/loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"loader.js","sourceRoot":"","sources":["../../../../src/components/ui/loader/loader.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAMzC;;GAEG;AACH,SAAS,MAAM,CAAC,EAAE,SAAS,EAAe;IACxC,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CAAC,yCAAyC,EAAE,SAAS,CAAC,EACnE,IAAI,EAAC,aAAa,YAElB,eAAK,SAAS,EAAC,6BAA6B,aAC1C,cAAK,SAAS,EAAC,uDAAuD,GAAG,EACzE,cAAK,SAAS,EAAC,iEAAiE,GAAG,EACnF,cAAK,SAAS,EAAC,qEAAqE,GAAG,IACnF,GACF,CACP,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"loader.js","sourceRoot":"","sources":["../../../../src/components/ui/loader/loader.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAOzC;;;GAGG;AACH,SAAS,MAAM,CAAC,EAAE,SAAS,EAAE,KAAK,GAAG,GAAG,EAAe;IACrD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;YAC5B,YAAY,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC,EAAE,KAAK,CAAC,CAAC;QAEV,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CAAC,yCAAyC,EAAE,SAAS,CAAC,GACnE,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CAAC,yCAAyC,EAAE,SAAS,CAAC,EACnE,IAAI,EAAC,aAAa,YAElB,eAAK,SAAS,EAAC,6BAA6B,aAC1C,cAAK,SAAS,EAAC,uDAAuD,GAAG,EACzE,cAAK,SAAS,EAAC,iEAAiE,GAAG,EACnF,cAAK,SAAS,EAAC,qEAAqE,GAAG,IACnF,GACF,CACP,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/ui/loader/loader.unit.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=loader.unit.test.d.ts.map

package/dist/components/ui/loader/loader.unit.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.unit.test.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/loader/loader.unit.test.tsx"],"names":[],"mappings":""}

package/dist/components/ui/loader/loader.unit.test.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { Loader } from './loader.js';
+describe('Loader', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+    });
+    it('should not show loader initially', () => {
+        const { container } = render(_jsx(Loader, {}));
+        // Should render empty container initially without progressbar role
+        const loaderContainer = container.querySelector('.flex.h-full.items-center.justify-center');
+        expect(loaderContainer).toBeInTheDocument();
+        expect(loaderContainer).not.toHaveAttribute('role', 'progressbar');
+        expect(loaderContainer?.children).toHaveLength(0);
+    });
+    it('should show loader after default delay of 300ms', () => {
+        render(_jsx(Loader, {}));
+        // Initially hidden - no progressbar role
+        expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+        // Advance time by 300ms
+        act(() => {
+            vi.advanceTimersByTime(300);
+        });
+        // Should now be visible with progressbar role
+        const loader = screen.getByRole('progressbar');
+        expect(loader).toBeInTheDocument();
+        expect(loader.querySelector('.flex.items-center.space-x-2')).toBeInTheDocument();
+    });
+    it('should show loader after custom delay', () => {
+        render(_jsx(Loader, { delay: 500 }));
+        // Initially hidden
+        expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+        // Advance time by 400ms (should still be hidden)
+        act(() => {
+            vi.advanceTimersByTime(400);
+        });
+        expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+        // Advance time by another 100ms (total 500ms)
+        act(() => {
+            vi.advanceTimersByTime(100);
+        });
+        // Should now be visible
+        const loader = screen.getByRole('progressbar');
+        expect(loader).toBeInTheDocument();
+    });
+    it('should apply custom className', () => {
+        render(_jsx(Loader, { className: "custom-class" }));
+        act(() => {
+            vi.advanceTimersByTime(300);
+        });
+        const loader = screen.getByRole('progressbar');
+        expect(loader).toHaveClass('custom-class');
+    });
+    it('should cleanup timer on unmount', () => {
+        const clearTimeoutSpy = vi.spyOn(globalThis, 'clearTimeout');
+        const { unmount } = render(_jsx(Loader, { delay: 1000 }));
+        unmount();
+        expect(clearTimeoutSpy).toHaveBeenCalled();
+    });
+});
+//# sourceMappingURL=loader.unit.test.js.map

package/dist/components/ui/loader/loader.unit.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.unit.test.js","sourceRoot":"","sources":["../../../../src/components/ui/loader/loader.unit.test.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baseplate-dev/ui-components",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Shared UI component library",
   "keywords": [
     "react",
@@ -68,7 +68,7 @@
     "tailwind-merge": "3.3.1",
     "zod": "3.24.1",
     "zustand": "5.0.3",
-    "@baseplate-dev/utils": "0.2.5"
+    "@baseplate-dev/utils": "0.2.6"
   },
   "devDependencies": {
     "@storybook/addon-docs": "9.0.16",
@@ -93,7 +93,7 @@
     "vite": "6.3.5",
     "vite-plugin-svgr": "4.3.0",
     "vitest": "3.0.7",
-    "@baseplate-dev/tools": "0.2.5"
+    "@baseplate-dev/tools": "0.2.6"
   },
   "engines": {
     "node": "^22.0.0"