Creating a Skeleton file for Image Gallery.

src/components/Charts/ImageGallerySkeleton.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+const ImageCardSkeleton = ({ count = 1 }) => {
+  const cards = Array.from({ length: count });
+
+  return (
+    <div className="row g-3">
+      {cards.map((_, idx) => (
+        <div key={idx} className="col-12">
+          <div className="card p-3">
+            <div className="d-flex align-items-center mb-2">
+              <div
+                className="rounded-circle bg-light placeholder"
+                style={{ width: "40px", height: "40px" }}
+              />
+              <div className="ms-2 flex-grow-1">
+                <h6 className="placeholder-glow mb-1">
+                  <span className="placeholder col-6 bg-light"></span>
+                </h6>
+                <small className="placeholder-glow">
+                  <span className="placeholder col-4 bg-light"></span>
+                </small>
+              </div>
+            </div>
+
+            <div
+              className="bg-light placeholder mb-2"
+              style={{ width: "100%", height: "150px", borderRadius: "4px" }}
+            />
+
+            <div className="d-flex justify-content-between align-items-center">
+              <div className="placeholder-glow">
+                <span className="placeholder col-4 bg-light"></span>
+              </div>
+              <div className="placeholder-glow">
+                <span className="placeholder col-2 bg-light"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ImageCardSkeleton;

src/pages/ImageGallery/ImageGalleryPage.jsx

@@ -12,6 +12,7 @@ import ImageGalleryListView from "../../components/ImageGallery/ImageGalleryList
 import ImageGalleryFilters from "../../components/ImageGallery/ImageGalleryFilters";
 import "../../components/ImageGallery/ImageGallery.css";
 import { useFab } from "../../Context/FabContext";
+import ImageGallerySkeleton from "../../components/Charts/ImageGallerySkeleton";
 
 const ImageGalleryPage = () => {
   const dispatch = useDispatch();
@@ -246,16 +247,21 @@ const ImageGalleryPage = () => {
       )}
 
 
-      <ImageGalleryListView
-        images={images}
-        isLoading={isLoading}
-        isFetchingNextPage={isFetchingNextPage}
-        hasNextPage={hasNextPage}
-        loaderRef={loaderRef}
-        openModal={openModal}
-        formatUTCToLocalTime={formatUTCToLocalTime}
-        moment={moment}
-      />
+      {isLoading ? (
+        <ImageGallerySkeleton count={4} />
+      ) : (
+        <ImageGalleryListView
+          images={images}
+          isLoading={isLoading}
+          isFetchingNextPage={isFetchingNextPage}
+          hasNextPage={hasNextPage}
+          loaderRef={loaderRef}
+          openModal={openModal}
+          formatUTCToLocalTime={formatUTCToLocalTime}
+          moment={moment}
+        />
+      )}
+
     </div>
   );
 };