added paginator loaders

PPLBandage · Dec 12, 2024 · c9812fd · c9812fd
1 parent d64696d
commit c9812fd
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 9 deletions.
diff --git a/src/app/modules/components/Paginator.tsx b/src/app/modules/components/Paginator.tsx
@@ -17,7 +17,7 @@ export const Paginator = ({ total_count, take, onChange, page }: PaginatorProps)
 
     const [_totalCount, _setTotalCount] = useState<number>(total_count);
     const [_take, _setTake] = useState<number>(take);
-    const [_display, _setDisplay] = useState<boolean>(true);
+    const [_display, _setDisplay] = useState<boolean>(false);
 
 
     useEffect(() => {
@@ -43,7 +43,7 @@ export const Paginator = ({ total_count, take, onChange, page }: PaginatorProps)
         let itpage = _page > 2 && pages_count > 4 ? _page - 2 : 0;
         for (let x = itpage; x < 5 + itpage; x++) {
             data.push(
-                <p style={x == _page ? { backgroundColor: "var(--main-element-color)", padding: ".5rem" } : x < pages_count ? {} : { visibility: "hidden" }}
+                <p style={x == Math.max(0, _page) ? { backgroundColor: "var(--main-element-color)", padding: ".5rem" } : x < pages_count ? {} : { visibility: "hidden" }}
                     key={x}
                     className={Styles.page}
                     onClick={() => _setPage(x)}>
@@ -56,13 +56,21 @@ export const Paginator = ({ total_count, take, onChange, page }: PaginatorProps)
         onChange(page);
     }, [_page, _totalCount, _take]);
 
-    return _display ? <div className={Styles.container}>
-        {_pages.length > 0 && <>
+    const loadingPages = Array.from({ length: 5 }, (_, index) =>
+        <p
+            key={index}
+            className={`${Styles.page} ${Styles.page_loading}`} />
+    );
+
+    return <div className={Styles.container}>
+        <>
             <IconChevronLeft className={`${Styles.page} ${Styles.arrow}`} onClick={() => _setPage(last => Math.max(0, last - 1))} />
-            {_pages}
+            {_display ?
+                _pages : loadingPages
+            }
             <IconChevronRight className={`${Styles.page} ${Styles.arrow}`} onClick={() => _setPage(last => Math.min(last + 1, Math.ceil(_totalCount / _take) - 1))} />
         </>
-        }
-    </div> : null;
+
+    </div>;
 
 };
diff --git a/src/app/styles/paginator.module.css b/src/app/styles/paginator.module.css
@@ -22,6 +22,27 @@
     background-color: var(--main-card-color);
 }
 
+.page_loading {
+    aspect-ratio: 1;
+    cursor: default;
+    background-color: var(--main-card-color);
+    animation: loading 3s infinite ease-in-out;
+}
+
+@keyframes loading {
+
+    0%,
+    50%,
+    100% {
+        opacity: 1;
+    }
+
+    25%,
+    75% {
+        opacity: .3;
+    }
+}
+
 @media(max-width: 767px) {
     .page {
         font-size: 1rem;

diff --git a/src/app/workshop/page.tsx b/src/app/workshop/page.tsx
@@ -149,8 +149,8 @@ export default function Home() {
                             onChangeTake={setTake}
                             onChangeSort={setSort}
                             onChangeFilters={setFilters} />
-                        {elements && elements.length > 0 &&
-                            <Paginator total_count={totalCount} take={take} onChange={setPage} page={page} />}
+
+                        <Paginator total_count={totalCount} take={take} onChange={setPage} page={page} />
                         {elements && elements.length > 0 ?
                             <SimpleGrid>{elements}</SimpleGrid> :
                             <TheresNothingHere elements={elements} />