refactor: implemented dynamic import on /people route

app/people/_components/ContributorPage.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import Image from "next/image";
 import HoverInfocard from "./HoverInfocard";
 import { TbZoomQuestion } from "react-icons/tb";
+import HoverCardWrapper from "./HoverCardWrapper";
 export default function ContributorPage({
   data,
   searchString,
@@ -31,18 +32,23 @@ export default function ContributorPage({
                 key={c.github}
                 className="group transition-all duration-150 ease-in-out hover:scale-125 hover:shadow-xl hover:shadow-primary-500"
               >
-                <Link href={`/contributors/${c.github}`}>
-                  <Image
-                    height={48}
-                    width={48}
-                    className="h-12 w-12 rounded-lg hover:ring hover:ring-primary-500"
-                    src={`https://avatars.githubusercontent.com/${c.github}?s=128`}
-                    alt={c.github}
-                  />
-                </Link>
-                <div className="absolute right-0 mt-1.5 translate-x-16 opacity-0 group-hover:opacity-100">
-                  <HoverInfocard contributor={c} />
-                </div>
+                <HoverCardWrapper
+                  key={c.github}
+                  github={c.github}
+                  name={c.name}
+                  title={c.title}
+                  content={c.content}
+                >
+                  <Link href={`/contributors/${c.github}`}>
+                    <Image
+                      height={48}
+                      width={48}
+                      className="h-12 w-12 rounded-lg hover:ring hover:ring-primary-500"
+                      src={`https://avatars.githubusercontent.com/${c.github}?s=128`}
+                      alt={c.github}
+                    />
+                  </Link>
+                </HoverCardWrapper>
               </li>
             ))}
           </ul>

app/people/_components/HoverCardWrapper.tsx

@@ -0,0 +1,54 @@
+"use client";
+import React, { useState } from "react";
+import dynamic from "next/dynamic";
+const HoverInfocard = dynamic(() => import("./HoverInfocard"), {
+  ssr: false,
+  loading: () => (
+    <div
+      className="max-h-64 w-44 overflow-hidden rounded-lg border-2 border-primary-700 bg-secondary-300 p-1 dark:bg-secondary-800 md:pb-2 xl:text-left"
+      role="listitem"
+    >
+      <span>Loading</span>
+      <div>
+        <span className="animate-[pulse_1s_infinite_100ms]">.</span>
+        <span className="animate-[pulse_1s_infinite_200ms]">.</span>
+        <span className="animate-[pulse_1s_infinite_300ms]">.</span>
+      </div>
+    </div>
+  ),
+});
+
+export default function HoverCardWrapper({
+  github,
+  name,
+  title,
+  content,
+  children,
+}: {
+  github: string;
+  name: string;
+  title: string;
+  content: string;
+  children: React.ReactNode;
+}) {
+  const [hover, setHover] = useState(false);
+
+  return (
+    <div
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+    >
+      {children}
+      <div className="absolute right-0 mt-1.5 translate-x-16 opacity-0 group-hover:opacity-100">
+        {hover && (
+          <HoverInfocard
+            github={github}
+            name={name}
+            title={title}
+            content={content}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

app/people/_components/HoverInfocard.tsx

@@ -1,12 +1,17 @@
 import Markdown from "@/components/Markdown";
-import { Contributor } from "@/lib/types";
 
 import Image from "next/image";
 
 export default function HoverInfoCard({
-  contributor,
+  github,
+  name,
+  title,
+  content,
 }: {
-  contributor: Contributor;
+  github: string;
+  name: string;
+  title: string;
+  content: string;
 }) {
   return (
     <div
@@ -17,27 +22,25 @@ export default function HoverInfoCard({
         <div className="z-10 flex h-16 w-16 shrink-0 items-center rounded-full p-1 md:h-20 md:w-20">
           <Image
             className="rounded-full border-2 border-indigo-500"
-            src={`https://avatars.githubusercontent.com/${contributor.github}`}
-            alt={contributor.github}
+            src={`https://avatars.githubusercontent.com/${github}`}
+            alt={github}
             height={64}
             width={64}
           />
         </div>
         <div className={`overflow-hidden `}>
           <div className="fnt-medium space-y-1 overflow-hidden text-sm">
             <h3 className="md:text-md overflow-hidden text-ellipsis text-base leading-tight">
-              {contributor.name}
+              {name}
             </h3>
             <p className="text-xs text-secondary-600 dark:text-secondary-400 ">
-              {contributor.title}
+              {title}
             </p>
           </div>
         </div>
       </div>
       <div className="sm:p-x-4 max-h-64 p-2 text-secondary-700 dark:text-secondary-300 ">
-        <Markdown className="text-xs md:text-sm">
-          {contributor.content}
-        </Markdown>
+        <Markdown className="text-xs md:text-sm">{content}</Markdown>
       </div>
     </div>
   );