From b2aee4439133ceb7915d5632bfae3fac6816086d Mon Sep 17 00:00:00 2001
From: Clumsy-Coder <19594044+Clumsy-Coder@users.noreply.github.com>
Date: Sun, 31 Dec 2023 15:23:32 -0700
Subject: [PATCH] feat(page:home): add `Skeleton` when fetching data

  ## what
  - add `Skeleton` when fetching data

  ## how
  - use shadcn-ui components
    - `Table`
    - `Skeleton`

  ## why
  - add better user experience when the data is being fetched

  ## where
  - ./src/app/page.tsx

  ## usage
---
 src/app/page.tsx | 47 ++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 46 insertions(+), 1 deletion(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index e4d3e13..9a6c820 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,10 +1,54 @@
 "use client";
 
 import { useRef } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Skeleton } from '@/components/ui/skeleton'
 
 import { useFetchLiveSubmission } from "@/hooks";
 import LiveSubmissionTable from "./LiveSubmissionTable";
 
+const Loading = () => {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Submission ID</TableHead>
+          <TableHead>Problem number</TableHead>
+          <TableHead>Problem title</TableHead>
+          <TableHead>User (username)</TableHead>
+          <TableHead className="text-center">Verdict</TableHead>
+          <TableHead>Language</TableHead>
+          <TableHead>Time</TableHead>
+          <TableHead>Rank</TableHead>
+          <TableHead className="text-right">Submit time</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {[...Array(10)].map((_, i) => {
+          return (
+            <TableRow key={`row-${i}`}>
+              {[...Array(9)].map((_, k) => (
+                <TableCell key={`row-${i}-cell-${k}`}>
+                  <Skeleton className="w-full h-4" />
+                </TableCell>
+              ))}
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
+
+///////////////////////////////////////////////////////////////////////////////////////////////////
+
 export default function Home() {
   // used for setting the pollId.
   // not using useState, because that will force a re-render every time it's set
@@ -14,7 +58,8 @@ export default function Home() {
   const { data, isLoading, isError, isSuccess } = useFetchLiveSubmission(pollIdRef.current);
 
   if (isLoading || !data) {
-    return <div>Fetching data</div>;
+    return <Loading />
+;
   }
 
   if (isError) {