Merge pull request #55 from react18-tools/feat/54-loading-prop

Feat/54-loading-prop

lib/CHANGELOG.md

@@ -1,5 +1,11 @@
 # react18-loaders
 
+## 1.1.0
+
+### Minor Changes
+
+- 032f2f8: Added loading prop to loader-container and improved styles
+
 ## 1.0.3
 
 ### Patch Changes

lib/package.json

@@ -2,7 +2,7 @@
   "name": "react18-loaders",
   "author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
   "private": false,
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "A comprehensive library that unleashes the full potential of React 18 server components, providing customizable loading animation components alongside a fullscreen loader container. Designed to seamlessly integrate with React and Next.js.",
   "license": "MPL-2.0",
   "main": "./dist/index.js",

lib/src/client/loader-container/loader-container.module.scss

@@ -7,7 +7,22 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  backdrop-filter: blur(3px);
-  background: #87ceeb85;
   z-index: 1000;
+  pointer-events: none;
+  backdrop-filter: blur(1px);
+  background: radial-gradient(circle, #535bf200 0%, #535bf200 150%, #8489f685, #535bf255);
+  opacity: 0;
+  transition: all 0.5s;
+  * {
+    animation-play-state: paused !important;
+  }
+}
+.loading {
+  backdrop-filter: blur(3px);
+  background: radial-gradient(circle, #535bf200 0%, #535bf200 0%, #8489f6b5 10%, #535bf255 100%);
+  pointer-events: all;
+  opacity: 1;
+  * {
+    animation-play-state: running !important;
+  }
 }

lib/src/client/loader-container/loader-container.test.tsx

@@ -8,4 +8,8 @@ describe.concurrent("loader-container", () => {
   test("check if renders without erros", () => {
     render(<LoaderContainer />);
   });
+
+  test("check if renders without erros", () => {
+    render(<LoaderContainer loading />);
+  });
 });

lib/src/client/loader-container/loader-container.tsx

@@ -4,13 +4,17 @@ import { LOADER_RGS_KEY } from "../../constants";
 
 interface LoaderContainerProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
+  loading?: boolean;
 }
 
 /**
  * # LoaderContainer
  * A full screen container for the loading animation.
  */
-export function LoaderContainer({ children }: LoaderContainerProps) {
-  const [loading] = useRGS(LOADER_RGS_KEY, false);
-  return loading ? <div className={styles.container}>{children}</div> : null;
+export function LoaderContainer({ children, loading }: LoaderContainerProps) {
+  const [_loading] = useRGS(LOADER_RGS_KEY, false);
+  const loading_ = loading ?? _loading;
+  return (
+    <div className={[styles.container, loading_ ? styles.loading : ""].join(" ")}>{children}</div>
+  );
 }

lib/src/hooks/use-loader.test.tsx

@@ -2,15 +2,16 @@ import { cleanup, render, renderHook, act } from "@testing-library/react";
 import { afterEach, describe, test } from "vitest";
 import { LoaderContainer } from "../client";
 import { useLoader } from "./use-loader";
+import styles from "../client/loader-container/loader-container.module.scss";
 
 describe.concurrent("loader-container", () => {
   afterEach(cleanup);
 
   test("Test hook", ({ expect }) => {
     const { result } = renderHook(() => useLoader());
     const { container } = render(<LoaderContainer />);
-    expect(container.childElementCount).toBe(0);
+    expect(container.children[0].classList).not.toContain(styles.loading);
     act(() => result.current.setLoading(true));
-    expect(container.childElementCount).toBe(1);
+    expect(container.children[0].classList).toContain(styles.loading);
   });
 });

packages/shared/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @repo/shared
 
+## 0.0.7
+
+### Patch Changes
+
+- Updated dependencies [032f2f8]
+  - [email protected]
+
 ## 0.0.6
 
 ### Patch Changes

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repo/shared",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "private": true,
   "sideEffects": false,
   "main": "./dist/index.js",