feat: add skeleton to main page

oae · Oct 15, 2022 · 787bbba · 787bbba
1 parent e09b656
commit 787bbba
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 6 deletions.
diff --git a/src/components/mangaCard.tsx b/src/components/mangaCard.tsx
@@ -1,8 +1,12 @@
-import { ActionIcon, Badge, Code, createStyles, Paper, Text, Title } from '@mantine/core';
+import { ActionIcon, Badge, Code, createStyles, Paper, Skeleton, Text, Title } from '@mantine/core';
 import { openConfirmModal } from '@mantine/modals';
 import { IconX } from '@tabler/icons';
 
 const useStyles = createStyles((theme, _params, getRef) => ({
+  skeletonCard: {
+    height: 350,
+    width: 210,
+  },
   card: {
     position: 'relative',
     height: 350,
@@ -76,6 +80,12 @@ const createRemoveModal = (title: string, onRemove: () => void) => {
   return openRemoveModal;
 };
 
+export function SkeletonMangaCard() {
+  const { classes } = useStyles();
+
+  return <Skeleton radius="md" className={classes.skeletonCard} />;
+}
+
 export function MangaCard({ cover, title, badge, onRemove, onClick }: ArticleCardImageProps) {
   const { classes } = useStyles();
   const removeModal = createRemoveModal(title, onRemove);

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
@@ -120,7 +120,6 @@ const collections = [
   { chapter: 133, label: 'Hunter x Hunter' },
   { chapter: 51, label: 'Noblesse' },
   { chapter: 24, label: 'Berserk' },
-  { chapter: 23, label: 'Berserk' },
 ];
 
 export function KaizokuNavbar() {
@@ -173,6 +172,7 @@ export function KaizokuNavbar() {
   ));
 
   if (libraryQuery.isLoading) {
+    // TODO: change with skeleton
     return <LoadingOverlay visible overlayBlur={2} />;
   }
 

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,11 +1,11 @@
-import { Code, Grid, LoadingOverlay, Text } from '@mantine/core';
+import { Code, Grid, Text } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { IconCheck, IconX } from '@tabler/icons';
 import { useRouter } from 'next/router';
 import { AddManga } from '../components/addManga';
 
 import { EmptyPrompt } from '../components/emptyPrompt';
-import { MangaCard } from '../components/mangaCard';
+import { MangaCard, SkeletonMangaCard } from '../components/mangaCard';
 import { trpc } from '../utils/trpc';
 
 export default function IndexPage() {
@@ -25,8 +25,21 @@ export default function IndexPage() {
     },
   );
 
-  if (libraryQuery.isLoading) {
-    return <LoadingOverlay visible overlayBlur={2} />;
+  if (mangaQuery.isLoading || libraryQuery.isLoading) {
+    return (
+      <Grid justify="flex-start">
+        {Array(10)
+          .fill(0)
+          .map((_, i) => {
+            return (
+              // eslint-disable-next-line react/no-array-index-key
+              <Grid.Col span="content" key={i}>
+                <SkeletonMangaCard />
+              </Grid.Col>
+            );
+          })}
+      </Grid>
+    );
   }
 
   if (!libraryQuery.data) {

diff --git a/src/pages/manga/[id].tsx b/src/pages/manga/[id].tsx
@@ -16,6 +16,7 @@ export default function LibraryPage() {
   );
 
   if (mangaQuery.isLoading) {
+    // TODO: change with skeleton
     return <LoadingOverlay visible overlayBlur={2} />;
   }