connected to backend

components/loadingProduct.tsx

@@ -0,0 +1,19 @@
+// Loading Skeleton Component
+export const LoadingSkeleton = () => {
+  return (
+    <>
+      {[1, 2, 3, 4].map((item) => (
+        <div
+          key={item}
+          className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse"
+        >
+          <div className="w-full h-48 bg-gray-200"></div>
+          <div className="p-4">
+            <div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
+            <div className="h-4 bg-gray-200 rounded w-1/2"></div>
+          </div>
+        </div>
+      ))}
+    </>
+  );
+};