feat: skeleton quiz list (#393)

src/app/toks-main/components/CardList.tsx

@@ -8,6 +8,7 @@ import { useIntersectionObserver } from '@/common/hooks';
 import { useQuizListInfinityQuery } from '@/queries/useQuizListInfinityQuery';
 
 import { QuizNotice } from './QuizNotice';
+import { SkeletonCardList } from './SkeletonCard';
 import { CARD_LIST_QUERY_DEFAULT } from '../constants';
 
 export const CardList = () => {
@@ -17,7 +18,9 @@ export const CardList = () => {
     data = CARD_LIST_QUERY_DEFAULT,
     hasNextPage,
     fetchNextPage,
+    isPending,
     isFetchingNextPage,
+    isFetching,
   } = useQuizListInfinityQuery();
 
   useIntersectionObserver({
@@ -28,6 +31,10 @@ export const CardList = () => {
 
   const { pages: quizList } = data;
 
+  if (isPending) {
+    return <SkeletonCardList />;
+  }
+
   return (
     <div className="flex h-full flex-col gap-8px">
       {quizList?.length === 0 && (
@@ -46,6 +53,7 @@ export const CardList = () => {
         />
       ))}
       <div ref={observeBox} />
+      {isFetching && <SkeletonCardList />}
     </div>
   );
 };

src/app/toks-main/components/SkeletonCard.tsx

@@ -0,0 +1,56 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import { Skeleton } from '@/common/components/Skeleton';
+
+type Props = {
+  quizType?: 'ox' | 'default';
+};
+
+export const SkeletonCardList = () => {
+  return (
+    <div className="flex h-full flex-col gap-8px">
+      <SkeletonCard quizType="ox" />
+      <SkeletonCard />
+      <SkeletonCard quizType="ox" />
+      <SkeletonCard />
+      <SkeletonCard quizType="ox" />
+      <SkeletonCard />
+    </div>
+  );
+};
+
+const SkeletonCard = ({ quizType = 'default' }: Props) => {
+  return (
+    <div
+      className={clsx(
+        'flex h-220px w-full min-w-180px gap-20px rounded-12px bg-gray-110 px-16px py-20px'
+      )}
+    >
+      <div className="flex h-full flex-1 animate-pulse flex-col justify-between">
+        <div className="flex flex-col">
+          <div className="flex gap-8px">
+            <Skeleton className="h-[20px] w-[40px]" />
+            <Skeleton className="h-[20px] w-[40px]" />
+          </div>
+        </div>
+        <div className="flex flex-col justify-between gap-8px rounded-8px">
+          <Skeleton className="h-[20px] w-4/5" />
+          <Skeleton className="h-[20px]" />
+          <Skeleton className="h-[20px] w-3/5" />
+        </div>
+        <Skeleton className="h-[14px]" />
+      </div>
+      <div className="flex w-[120px] animate-pulse flex-col gap-8px">
+        {quizType === 'ox' ? (
+          <>
+            <Skeleton className="h-1/2" />
+            <Skeleton className="h-1/2" />
+          </>
+        ) : (
+          <Skeleton className="h-full" />
+        )}
+      </div>
+    </div>
+  );
+};

src/common/components/Skeleton.tsx

@@ -0,0 +1,13 @@
+import { ClassNameValue, twMerge } from 'tailwind-merge';
+
+type Props = {
+  className?: ClassNameValue;
+};
+
+export const Skeleton = ({ className }: Props) => {
+  return (
+    <div
+      className={twMerge('h-[20px] w-full rounded-[8px] bg-gray-90', className)}
+    />
+  );
+};