Create a PlaceHolder component

src/static/populate_index.js

@@ -25,7 +25,7 @@ async function FetchData() {
   // let videos = await get("/data/videos.json");
 
   const Images = document.querySelectorAll(
-    '[data-type="index__placeholder__image"]'
+    '[data-type="placeholder__image"]'
   );
   const VisibleImages = [];
   Images.forEach((placeholder) => {
@@ -37,7 +37,7 @@ async function FetchData() {
   randomElements(images, VisibleImages.length).forEach((image, idx) => {
     const src = `${config.endpoint}/${config.bucket}/${config.prefix}/${image.src}`;
     const loader = document.getElementById(
-      `index__placeholder__image-${idx + 1}-loader`
+      `placeholder__image-${idx + 1}-loader`
     );
     const blurImg = document.createElement("img");
     const Img = document.createElement("img");

src/templates/Components/PlaceHolder.tsx

@@ -0,0 +1,18 @@
+export default function Placeholder(props: {
+  idx: string | number;
+  isMobileHidden?: boolean;
+}) {
+  return (
+    <a
+      data-type="placeholder__image"
+      className={`relative aspect-square min-w-48 sm:min-w-auto rounded-sm overflow-hidden ${
+        props.isMobileHidden ? "hidden xl:block" : ""
+      }`}
+    >
+      <div
+        id={`placeholder__image-${props.idx}-loader`}
+        className="w-full h-full absolute inset-0 bg-gray-400 opacity-30 animate-pulse z-[3]"
+      ></div>
+    </a>
+  );
+}

src/templates/index.tsx

@@ -1,4 +1,6 @@
 import AllLink from "./Components/AllLink";
+import Placeholder from "./Components/PlaceHolder";
+
 export default function IndexPage() {
   return (
     <div>
@@ -7,21 +9,8 @@ export default function IndexPage() {
         id="index_images"
         className="mt-4 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-4"
       >
-        {[1, 2, 3, 4, 5, 6, 7].map((num, idx) => {
-          return (
-            <a
-              data-type="index__placeholder__image"
-              key={`index__placeholder__image-${num}`}
-              className={`relative aspect-square min-w-48 sm:min-w-auto rounded-sm overflow-hidden ${
-                idx >= 5 ? "hidden xl:block" : ""
-              }`}
-            >
-              <div
-                id={`index__placeholder__image-${num}-loader`}
-                className="w-full h-full absolute inset-0 bg-gray-400 opacity-30 animate-pulse z-[3]"
-              ></div>
-            </a>
-          );
+        {[1, 2, 3, 4, 5, 6, 7].map((idx) => {
+          return <Placeholder key={`placeholder__image-${idx}`} idx={idx} isMobileHidden={idx > 5} />;
         })}
         <AllLink location="/images/" text="View All Images" />
       </div>