feat(projects): add skeleton loading (#221)

pravastacaraka · Jul 15, 2024 · 1f05a81 · 1f05a81
1 parent 658989d
commit 1f05a81
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 48 deletions.
diff --git a/app/(core)/projects/layout.js b/app/(core)/projects/layout.js
@@ -1,6 +1,4 @@
 import { Heading, Stack, Text } from "@app-providers/chakra-ui";
-import { Suspense } from "react";
-import Loading from "./loading";
 
 /** @type {import("next").Metadata} */
 export const metadata = {
@@ -15,7 +13,7 @@ function ProjectsLayout({ children }) {
         <Heading as="h1">Recent Projects</Heading>
         <Text as="h2">Here are some of my past works from personal projects and open source ones.</Text>
       </Stack>
-      <Suspense fallback={<Loading />}>{children}</Suspense>
+      {children}
     </Stack>
   );
 }

diff --git a/app/(core)/projects/loading.js b/app/(core)/projects/loading.js
@@ -1,20 +1,17 @@
-import { CustomReactMarkdown } from "@app-components/markdown";
-import { Spinner, Stack } from "@app-providers/chakra-ui";
+import { AspectRatio, SimpleGrid, Skeleton, Stack } from "@chakra-ui/react";
 
-const Loading = () => (
-  <Stack
-    h={{
-      base: "calc(100vh - 30rem)",
-      xs: "calc(100vh - 30rem + 35px)",
-      sm: "calc(100vh - 30rem + 81px)",
-      md: "calc(100vh - 30rem - 4px)",
-    }}
-    align="center"
-    justify="center"
-  >
-    <Spinner size="xl" />
-    <CustomReactMarkdown>Loading...</CustomReactMarkdown>
-  </Stack>
-);
+const Loading = () => {
+  return (
+    <Stack spacing={4}>
+      <SimpleGrid columns={{ base: 1, sm: 2 }} gap={4}>
+        {Array.from({ length: 6 }).map((_, index) => (
+          <AspectRatio key={index} ratio={16 / 9} overflow="hidden" rounded="md">
+            <Skeleton />
+          </AspectRatio>
+        ))}
+      </SimpleGrid>
+    </Stack>
+  );
+};
 
 export default Loading;
diff --git a/app/(core)/projects/page.js b/app/(core)/projects/page.js
@@ -2,10 +2,12 @@ import { ProjectCard } from "@app-components/Card";
 import { CustomReactMarkdown } from "@app-components/markdown";
 import { Center, SimpleGrid, Stack } from "@app-providers/chakra-ui";
 import { getPlaiceholder } from "plaiceholder";
+import { Suspense } from "react";
+import Loading from "./loading";
 
 const BASE_URL = `https://api.airtable.com/v0/${process.env.AIRTABLE_BASE_ID}`;
 
-async function fetchProjectsData() {
+async function getData() {
   const headers = {
     Authorization: `Bearer ${process.env.AIRTABLE_API_KEY}`,
     "Content-Type": "application/json",
@@ -57,38 +59,42 @@ async function fetchProjectsData() {
   return records;
 }
 
-function ProjectList({ projects }) {
-  return (
-    <Stack spacing={4}>
-      <SimpleGrid columns={{ base: 1, sm: 2 }} gap={4}>
-        {projects.map((project) => (
-          <ProjectCard key={project.id} project={project} />
-        ))}
-      </SimpleGrid>
-    </Stack>
-  );
-}
+const NotFound = () => (
+  <Center
+    h={{
+      base: "calc(100vh - 30rem)",
+      xs: "calc(100vh - 30rem + 35px)",
+      sm: "calc(100vh - 30rem + 81px)",
+      md: "calc(100vh - 30rem - 4px)",
+    }}
+    textAlign="center"
+  >
+    <CustomReactMarkdown>Don&apos;t have any projects.</CustomReactMarkdown>
+  </Center>
+);
+
+const ProjectList = ({ projects }) => (
+  <Stack spacing={4}>
+    <SimpleGrid columns={{ base: 1, sm: 2 }} gap={4}>
+      {projects.map((project) => (
+        <ProjectCard key={project.id} project={project} />
+      ))}
+    </SimpleGrid>
+  </Stack>
+);
 
 async function Page() {
-  const projects = await fetchProjectsData();
+  const projects = await getData();
 
   if (!projects || projects.length === 0) {
-    return (
-      <Center
-        h={{
-          base: "calc(100vh - 30rem)",
-          xs: "calc(100vh - 30rem + 35px)",
-          sm: "calc(100vh - 30rem + 81px)",
-          md: "calc(100vh - 30rem - 4px)",
-        }}
-        textAlign="center"
-      >
-        <CustomReactMarkdown>Don&apos;t have any projects.</CustomReactMarkdown>
-      </Center>
-    );
+    return <NotFound />;
   }
 
-  return <ProjectList projects={projects} />;
+  return (
+    <Suspense fallback={<Loading />}>
+      <ProjectList projects={projects} />
+    </Suspense>
+  );
 }
 
 export default Page;
diff --git a/components/Card.js b/components/Card.js
@@ -54,7 +54,7 @@ function ProjectCard({ project }) {
         transitionProperty="opacity"
         transitionTimingFunction="cubic-bezier(.39,.575,.565,1)"
       >
-        <Heading size={["sm", "md"]} color="white" noOfLines={2}>
+        <Heading size={{ lg: "md" }} color="white" noOfLines={2}>
           {project.name}
         </Heading>
         <Text fontSize={["xs", "sm"]} color="white" noOfLines={2}>