Feature #117 LotusDetail Loading fallback

apps/frontend/src/page/(main)/lotus/$lotusId/index.lazy.tsx

@@ -16,11 +16,11 @@ function RouteComponent() {
 
   return (
     <div className="flex flex-col gap-16">
-      <AsyncBoundary pending={<div>Loading...</div>} rejected={() => <div>Error!</div>}>
+      <AsyncBoundary pending={<SuspenseLotusDetail.Skeleton />} rejected={() => <div>Error!</div>}>
         <SuspenseLotusDetail id={id} />
       </AsyncBoundary>
 
-      <AsyncBoundary pending={<div>Loading...</div>} rejected={() => <div>Error!</div>}>
+      <AsyncBoundary pending={<SuspenseLotusFiles.Skeleton />} rejected={() => <div>Error!</div>}>
         <SuspenseLotusFiles id={id} />
       </AsyncBoundary>
 

apps/frontend/src/widget/history/SuspenseLotusHistoryList.tsx

@@ -9,9 +9,11 @@ export function SuspenseLotusHistoryList({ id }: { id: string }) {
     data: { list }
   } = useLotusHistoryListSuspenseQuery({ id });
 
+  const firstPendingIndex = list.findIndex((history) => history.status === 'PENDING');
+
   return (
     <div className="flex flex-col gap-5">
-      <Accordion type="single">
+      <Accordion type="single" defaultValue={list[firstPendingIndex]?.id}>
         {list.map((history) => (
           <AccordionItem
             key={history.id}

apps/frontend/src/widget/lotusDelete/index.tsx

@@ -51,3 +51,14 @@ export function LotusDeleteButton({ lotusId }: { lotusId: string }) {
     </Button>
   );
 }
+
+function SkeletonLotusDeleteButton() {
+  return (
+    <Button variant={'destructive'} disabled>
+      <RiDeleteBin5Fill />
+      <Text size="sm">삭제하기</Text>
+    </Button>
+  );
+}
+
+LotusDeleteButton.Skeleton = SkeletonLotusDeleteButton;

apps/frontend/src/widget/lotusDetail/SuspenseLotusDetail.tsx

@@ -1,3 +1,4 @@
+import { Skeleton } from '@/components';
 import { Lotus, useLotusSuspenseQuery } from '@/feature/lotus';
 import { LotusDeleteButton } from '@/widget/lotusDelete';
 import { LotusUpdateButton, SuspenseLotusPublicToggle } from '@/widget/lotusUpdate';
@@ -9,7 +10,7 @@ export function SuspenseLotusDetail({ id }: { id: string }) {
     <div className="flex justify-between items-start pb-4 border-b-2 border-slate-200">
       <div>
         <Lotus lotus={lotus}>
-          <div className=" mb-4">
+          <div className="mb-4">
             <Lotus.Title className="text-3xl font-bold mr-4" />
             <div>{lotus?.tags?.length > 0 && <Lotus.TagList className="pt-4 min-h-8" variant={'default'} />}</div>
           </div>
@@ -25,3 +26,29 @@ export function SuspenseLotusDetail({ id }: { id: string }) {
     </div>
   );
 }
+
+function SkeletonLotusDetail() {
+  return (
+    <div className="flex justify-between items-start pb-4 border-b-2 border-slate-200">
+      <div>
+        <div className="mb-4">
+          <Skeleton className="font-bold mr-4 w-32 h-10" />
+        </div>
+        <div className="flex gap-2 mb-4">
+          {new Array(3).fill(0).map((_, index) => (
+            <Skeleton key={index} className="w-10 h-6 rounded-sm" />
+          ))}
+        </div>
+        <Skeleton className="w-18 h-6 my-2" />
+        <Skeleton className="w-10 h-4" />
+      </div>
+      <div className="flex items-center gap-2 pt-2">
+        <SuspenseLotusPublicToggle.Skeleton />
+        <LotusUpdateButton.Skeleton />
+        <LotusDeleteButton.Skeleton />
+      </div>
+    </div>
+  );
+}
+
+SuspenseLotusDetail.Skeleton = SkeletonLotusDetail;

apps/frontend/src/widget/lotusDetail/SuspenseLotusFiles.tsx

@@ -1,3 +1,4 @@
+import { Skeleton } from '@/components';
 import { CodeView } from '@/feature/codeView';
 import { useLotusSuspenseQuery } from '@/feature/lotus';
 
@@ -17,3 +18,14 @@ export function SuspenseLotusFiles({ id }: { id: string }) {
     </CodeView>
   );
 }
+
+export function LotusFileSkeleton() {
+  return (
+    <div className="flex github gap-4 w-full h-[600px] pb-10 px-2 overflow-hidden">
+      <Skeleton className="h-full min-w-48" />
+      <Skeleton className="h-full w-full" />
+    </div>
+  );
+}
+
+SuspenseLotusFiles.Skeleton = LotusFileSkeleton;

apps/frontend/src/widget/lotusUpdate/LotusUpdateButton.tsx

@@ -42,3 +42,14 @@ export function LotusUpdateButton({ lotusId }: { lotusId: string }) {
     </Button>
   );
 }
+
+function SkeletonLotusUpdateButton() {
+  return (
+    <Button variant={'default'} disabled>
+      <IoSettingsSharp />
+      <Text size="sm">수정하기</Text>
+    </Button>
+  );
+}
+
+LotusUpdateButton.Skeleton = SkeletonLotusUpdateButton;

apps/frontend/src/widget/lotusUpdate/SuspenseLotusPublicToggle.tsx

@@ -40,3 +40,16 @@ export function SuspenseLotusPublicToggle({ lotus, className }: { lotus: LotusTy
     </div>
   );
 }
+
+function SkeletonSuspenseLotusPublicToggle() {
+  return (
+    <div className="flex items-center gap-2">
+      <Switch disabled />
+      <Text size="sm" variant="muted">
+        private / public
+      </Text>
+    </div>
+  );
+}
+
+SuspenseLotusPublicToggle.Skeleton = SkeletonSuspenseLotusPublicToggle;

packages/design/src/components/index.tsx

@@ -8,4 +8,5 @@ export * from './ui/typography';
 export * from './ui/tabs';
 export * from './ui/switch';
 export * from './ui/accordion';
+export * from './ui/skeleton';
 export * from './Slot';

packages/design/src/components/ui/skeleton.tsx

@@ -0,0 +1,7 @@
+import { cn } from '@/lib/utils';
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('animate-pulse rounded-md bg-neutral-100 dark:bg-neutral-800', className)} {...props} />;
+}
+
+export { Skeleton };