first commit

src/components/CatalogProductCardSkeleton.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+
+const CatalogProductCardSkeleton: React.FC = () => {
+  return (
+    <div className="w-layout-vflex flex-block-15-copy" data-article-card="skeleton">
+      {/* Иконка избранного */}
+      <div className="favcardcat">
+        <div className="icon-setting w-embed">
+          <Skeleton width={24} height={24} />
+        </div>
+      </div>
+      
+      {/* Изображение товара */}
+      <div className="div-block-4">
+        <Skeleton height={200} className="image-5" />
+        <div className="text-block-7">
+          <Skeleton width={60} height={20} />
+        </div>
+      </div>
+      
+      {/* Информация о товаре */}
+      <div className="div-block-3">
+        <div className="w-layout-hflex flex-block-16">
+          <div className="text-block-8">
+            <Skeleton width={80} height={24} />
+          </div>
+          <div className="text-block-9">
+            <Skeleton width={60} height={20} />
+          </div>
+        </div>
+        <div className="text-block-10" style={{ marginTop: '8px' }}>
+          <Skeleton height={20} />
+        </div>
+        <div className="text-block-11" style={{ marginTop: '4px' }}>
+          <Skeleton width="70%" height={16} />
+        </div>
+      </div>
+      
+      {/* Кнопка купить */}
+      <div className="catc w-inline-block">
+        <div className="div-block-25">
+          <div className="icon-setting w-embed">
+            <Skeleton width={24} height={24} />
+          </div>
+        </div>
+        <div className="text-block-6">
+          <Skeleton width={50} height={16} />
+        </div>
+      </div>
+    </div>
+  );
+  };
+
+export default CatalogProductCardSkeleton;