added skeletons

src/components/CatalogLoader.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import useBoardStore from '../useBoardStore';
+
+
+const SingleRectLoader = () => {
+  const selectedStyle = useBoardStore((state) => state.selectedStyle);
+  const backgroundColor = selectedStyle === 'Tomorrow' ? '#333' : '#f3f3f3';
+  const foregroundColor = selectedStyle === 'Tomorrow' ? '#555' : '#ecebeb';
+  
+  return (
+    <ContentLoader
+      speed={2}
+      width={150}
+      height={215}
+      viewBox="0 0 150 215"
+      backgroundColor={backgroundColor}
+      foregroundColor={foregroundColor}
+      style={{
+        width: '150px',
+        height: '215px',
+        marginRight: '30px',
+        marginBottom: '30px',
+      }}
+    >
+      <rect x={0} y={0} width="150" height="150" />
+      <rect x={0} y={170} width="150" height="18" />
+      <rect x={0} y={195} width="80" height="20" />
+    </ContentLoader>
+  );
+};
+
+
+const CatalogLoader = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        boxSizing: 'border-box',
+      }}
+    >
+      {[...Array(24)].map((_, index) => (
+        <SingleRectLoader key={index} />
+      ))}
+    </div>
+  );
+};
+
+export default CatalogLoader;