@sledge-app/react-instant-search 0.0.100 → 0.0.101

package/dist/sledge-react-instant-search.js

@@ -2441,7 +2441,22 @@ const ScrollArea = ({ children, isLoading = false, className = "", withCorner =
 };
 const SkeletonLoading$1 = "";
 const SkeletonItem = ({ width, height, rounded, color, style = {}, className = "", ...otherProps }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  const [isLoading, setIsLoading] = React__default.useState(true);
+  const [dataSettings, setDataSettings] = React__default.useState({});
+  const { enable, colors } = (dataSettings == null ? void 0 : dataSettings.skeleton) || {};
+  const { main_color } = colors || {};
+  const handleSettings = () => {
+    let response;
+    response = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.GENERAL_SETTING) || "");
+    if (!response)
+      return;
+    setIsLoading(false);
+    setDataSettings(response);
+  };
+  React__default.useEffect(() => {
+    handleSettings();
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !isLoading && enable ? /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       className: `sledge__skeleton-item sledge__skeleton-item-animation ${className}`,
@@ -2450,16 +2465,16 @@ const SkeletonItem = ({ width, height, rounded, color, style = {}, className = "
           width,
           height
         },
-        // ...(main_color && {
-        //     background: main_color
-        // }),
+        ...main_color && {
+          background: main_color
+        },
         ...style
       },
       "data-skeleton-rounded": rounded,
       "data-skeleton-color": color,
       ...otherProps
     }
-  );
+  ) : null });
 };
 const SkeletonProductGrid = ({ count, type }) => {
   let components = [];