With skeleton loader timed in

NYPL · Nov 13, 2024 · 15aa47b · 15aa47b
1 parent 13e46de
commit 15aa47b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/app/src/components/lane/laneLoading.tsx b/app/src/components/lane/laneLoading.tsx
@@ -14,7 +14,7 @@ export default function LaneLoading({ withTitle = true }) {
           <SkeletonLoader contentSize={0} showImage={false} headingSize={1} />
         </Flex>
       )}
-      <DCSimpleGrid>
+      <DCSimpleGrid marginTop="s">
         <SkeletonLoader imageAspectRatio="landscape" contentSize={1} />
         <SkeletonLoader imageAspectRatio="landscape" contentSize={1} />
         <SkeletonLoader imageAspectRatio="landscape" contentSize={1} />

diff --git a/app/src/components/pages/divisionPage/divisionPage.tsx b/app/src/components/pages/divisionPage/divisionPage.tsx
@@ -38,9 +38,7 @@ export default function DivisionPage({ data }: any) {
     Number(queryParams.get("page")) || 1
   );
 
-  const { replace } = useRouter();
-
-  const { isLargerThanLargeTablet } = useBreakpoints();
+  const { push } = useRouter();
 
   const totalPages = totalNumPages(data.numFound, data.perPage);
 
@@ -49,8 +47,12 @@ export default function DivisionPage({ data }: any) {
     params.set("page", pageNumber.toString());
     setCurrentPage(pageNumber);
     const url = `${pathname}?${params.toString()}#${data.slug}`;
-    replace(url);
-    headingRef.current?.focus;
+    setIsLoaded(false);
+    setTimeout(() => {
+      setIsLoaded(true);
+      push(url);
+      headingRef.current?.focus;
+    }, 1500);
   };
 
   useEffect(() => {
@@ -123,11 +125,9 @@ export default function DivisionPage({ data }: any) {
       {isLoaded ? (
         <CardsGrid records={data.collections} />
       ) : (
-        <>
-          <LaneLoading withTitle={false} />
-          <LaneLoading withTitle={false} />
+        Array(Math.ceil(data.collections / 4)).fill(
           <LaneLoading withTitle={false} />
-        </>
+        )
       )}
       {totalPages > 1 && (
         <Pagination