perf: render a function that returns a content in about section

moonbamijam · Apr 28, 2024 · d9c9f2d · d9c9f2d
1 parent dd64c77
commit d9c9f2d
Showing 1 changed file with 21 additions and 19 deletions.
diff --git a/components/sections/AboutSection.tsx b/components/sections/AboutSection.tsx
@@ -9,6 +9,26 @@ import { AboutType } from "@shared-types/about";
 export default async function AboutSection() {
   const { abouts } = await useFetch("/api/abouts");
 
+  const renderAbout = () => {
+    if (abouts) {
+      return abouts.map((about: AboutType) => (
+        <AboutUi
+          key={about._id}
+          displayName={about.displayName}
+          desc={about.desc}
+          fullName={about.fullName}
+          nickname={about.nickname}
+          age={about.age}
+          birthday={about.birthday}
+          sex={about.sex}
+          nationality={about.nationality}
+          status={about.status}
+          languages={about.languages}
+        />
+      ));
+    } else return <LoadingSpinner />;
+  };
+
   return (
     <Section id={"about"} contentStyles={"gap-[100px]"}>
       <Title
@@ -20,25 +40,7 @@ export default async function AboutSection() {
           <Picture src={"me_x4brue"} alt={"Jam Moonbami"} isPriority={true} />
         </div>
         <div className="about-me flex flex-col gap-[30px] ">
-          {abouts ? (
-            abouts.map((about: AboutType) => (
-              <AboutUi
-                key={about._id}
-                displayName={about.displayName}
-                desc={about.desc}
-                fullName={about.fullName}
-                nickname={about.nickname}
-                age={about.age}
-                birthday={about.birthday}
-                sex={about.sex}
-                nationality={about.nationality}
-                status={about.status}
-                languages={about.languages}
-              />
-            ))
-          ) : (
-            <LoadingSpinner />
-          )}
+          {renderAbout()}
         </div>
       </div>
     </Section>