l-min-components 1.0.500 → 1.0.503

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.500",
+  "version": "1.0.503",
   "type": "module",
   "files": [
     "src/assets",
@@ -21,6 +21,7 @@
     "emoji-picker-react": "^4.4.10",
     "i": "^0.3.7",
     "js-cookie": "^3.0.5",
+    "lottie-web": "^5.12.2",
     "moment": "^2.29.4",
     "npm": "^10.2.5",
     "prop-types": "^15.8.1",

package/src/components/fullPageLoader/index.jsx

@@ -3,9 +3,11 @@ import styled, { css } from 'styled-components';
 import loaderGif from './assets/first.gif';
 import Lottie from 'react-lottie';
 import defaultLoaderAnimation from './loader_3.json'; 
+import Loader from './loader';
 
 /**
  * @param {{
+* loaderAsset: object,
 * isSectionLoader: boolean,
 * hasBackground: boolean,
 * }} props - properties of the dropdown component
@@ -55,21 +57,12 @@ const LoaderWrapper = styled.div`
   }
 `;
 
-const FullPageLoader = ({ isSectionLoader = false, hasBackground = false  }) => {
-
-  const defaultOptions = {
-    loop: true,
-    autoplay: true,
-    animationData: defaultLoaderAnimation,
-    rendererSettings: {
-      preserveAspectRatio: 'xMidYMid slice'
-    }
-  };
+const FullPageLoader = ({ isSectionLoader = false, hasBackground = false,  loaderAsset,  }) => {
 
   return (
     <Backdrop isSectionLoader={isSectionLoader} hasBackground={hasBackground}>
       <LoaderWrapper isSectionLoader={isSectionLoader}>
-        <Lottie options={defaultOptions} height={300} width={300} />
+        <Loader loaderAsset={loaderAsset} />
       </LoaderWrapper>
     </Backdrop>
   );

package/src/components/fullPageLoader/loader.jsx

@@ -0,0 +1,35 @@
+
+import React, { useEffect, useRef } from 'react';
+import lottie from 'lottie-web';
+import styled from 'styled-components';
+import defaultLoaderAnimation from './loader_3.json';
+
+const LoaderWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 400px;
+  height: 400px;
+`;
+
+const PageLoader = ({ loaderAsset = defaultLoaderAnimation }) => {
+  const animationContainer = useRef(null);
+
+  useEffect(() => {
+    const anim = lottie.loadAnimation({
+      container: animationContainer.current,
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      animationData: loaderAsset
+    });
+
+    return () => anim.destroy(); // Cleanup animation on unmount
+  }, [loaderAsset]);
+
+  return (
+    <LoaderWrapper ref={animationContainer} />
+  );
+};
+
+export default PageLoader;