From 48184021979095db1025ad4ea1e1d3af83c92907 Mon Sep 17 00:00:00 2001
From: Anurag Yadav <anuragyadav2787@gmail.com>
Date: Wed, 11 Feb 2026 20:38:38 +0530
Subject: [PATCH 1/4] Removed Nested componentes

---
 .../src/app/board/[year]/candidates/page.tsx  | 1045 +++++++++--------
 frontend/src/app/global-error.tsx             |   14 +-
 frontend/src/app/members/[memberKey]/page.tsx |  124 +-
 frontend/src/components/SkeletonsBase.tsx     |   55 +-
 4 files changed, 640 insertions(+), 598 deletions(-)

diff --git a/frontend/src/app/board/[year]/candidates/page.tsx b/frontend/src/app/board/[year]/candidates/page.tsx
index 2820c5933e..b28e944cb7 100644
--- a/frontend/src/app/board/[year]/candidates/page.tsx
+++ b/frontend/src/app/board/[year]/candidates/page.tsx
@@ -85,602 +85,605 @@ type CandidateWithSnapshot = Candidate & {
   snapshot?: MemberSnapshot
 }
 
-const BoardCandidatesPage = () => {
-  const { year } = useParams<{ year: string }>()
-  const [candidates, setCandidates] = useState<CandidateWithSnapshot[]>([])
+interface CandidateCardProps {
+  candidate: CandidateWithSnapshot
+  year: string
+}
 
-  const {
-    data: graphQLData,
-    error: graphQLRequestError,
-    loading,
-  } = useQuery(GetBoardCandidatesDocument, {
-    variables: { year: Number.parseInt(year) },
-  })
+const CandidateCard = ({ candidate, year }: CandidateCardProps) => {
+  const client = useApolloClient()
+  const [snapshot, setSnapshot] = useState<MemberSnapshot | null>(null)
+  const [ledChapters, setLedChapters] = useState<Chapter[]>([])
+  const [ledProjects, setLedProjects] = useState<Project[]>([])
 
-  useEffect(() => {
-    if (graphQLData?.boardOfDirectors) {
-      setCandidates(graphQLData.boardOfDirectors.candidates || [])
-    }
-    if (graphQLRequestError) {
-      handleAppError(graphQLRequestError)
-    }
-  }, [graphQLData, graphQLRequestError])
-
-  const CandidateCard = ({ candidate }: { candidate: CandidateWithSnapshot }) => {
-    const client = useApolloClient()
-    const [snapshot, setSnapshot] = useState<MemberSnapshot | null>(null)
-    const [ledChapters, setLedChapters] = useState<Chapter[]>([])
-    const [ledProjects, setLedProjects] = useState<Project[]>([])
+  const sortByName = <T extends { name: string }>(items: T[]): T[] => {
+    return [...items].sort((a, b) => a.name.localeCompare(b.name))
+  }
 
-    const sortByName = <T extends { name: string }>(items: T[]): T[] => {
-      return [...items].sort((a, b) => a.name.localeCompare(b.name))
-    }
+  const sortByContributionCount = (entries: Array<[string, number]>): Array<[string, number]> => {
+    return [...entries].sort(([, a], [, b]) => b - a)
+  }
 
-    const sortByContributionCount = (entries: Array<[string, number]>): Array<[string, number]> => {
-      return [...entries].sort(([, a], [, b]) => b - a)
-    }
+  const sortChannelsByMessageCount = (
+    entries: Array<[string, number]>
+  ): Array<[string, number]> => {
+    return [...entries].sort(([, a], [, b]) => b - a)
+  }
 
-    const sortChannelsByMessageCount = (
-      entries: Array<[string, number]>
-    ): Array<[string, number]> => {
-      return [...entries].sort(([, a], [, b]) => b - a)
-    }
+  // Render a single repository link item
+  const renderChannelLink = (channelName: string, messageCount: string | number) => (
+    <a
+      key={channelName}
+      href={`https://owasp.slack.com/archives/${channelName}`}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="inline-flex items-center gap-1.5 rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-blue-700/10 ring-inset hover:bg-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:ring-blue-400/30 dark:hover:bg-blue-900/30"
+      onClick={(e) => e.stopPropagation()}
+    >
+      <span>#{channelName}</span>
+      <span className="rounded bg-blue-100 px-1.5 py-0.5 text-[10px] font-semibold text-blue-800 dark:bg-blue-800/40 dark:text-blue-300">
+        {Number(messageCount)} messages
+      </span>
+    </a>
+  )
 
-    // Render a single repository link item
-    const renderChannelLink = (channelName: string, messageCount: string | number) => (
+  // Render a single repository link item
+  const renderRepositoryLink = (repoName: string, count: number) => {
+    const commitCount = Number(count)
+    return (
       <a
-        key={channelName}
-        href={`https://owasp.slack.com/archives/${channelName}`}
+        key={repoName}
+        href={`https://github.com/${repoName}/commits?author=${candidate.member?.login}`}
         target="_blank"
         rel="noopener noreferrer"
         className="inline-flex items-center gap-1.5 rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-blue-700/10 ring-inset hover:bg-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:ring-blue-400/30 dark:hover:bg-blue-900/30"
         onClick={(e) => e.stopPropagation()}
       >
-        <span>#{channelName}</span>
+        <span>{repoName}</span>
         <span className="rounded bg-blue-100 px-1.5 py-0.5 text-[10px] font-semibold text-blue-800 dark:bg-blue-800/40 dark:text-blue-300">
-          {Number(messageCount)} messages
+          {commitCount} commits
         </span>
       </a>
     )
+  }
 
-    // Render a single repository link item
-    const renderRepositoryLink = (repoName: string, count: number) => {
-      const commitCount = Number(count)
+  const renderTopActiveChannels = () => {
+    if (!snapshot) return null
+
+    if (
+      !snapshot.channelCommunications ||
+      Object.keys(snapshot.channelCommunications).length <= 0
+    ) {
       return (
-        <a
-          key={repoName}
-          href={`https://github.com/${repoName}/commits?author=${candidate.member?.login}`}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="inline-flex items-center gap-1.5 rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-blue-700/10 ring-inset hover:bg-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:ring-blue-400/30 dark:hover:bg-blue-900/30"
-          onClick={(e) => e.stopPropagation()}
-        >
-          <span>{repoName}</span>
-          <span className="rounded bg-blue-100 px-1.5 py-0.5 text-[10px] font-semibold text-blue-800 dark:bg-blue-800/40 dark:text-blue-300">
-            {commitCount} commits
-          </span>
-        </a>
+        <div className="mt-4 w-full">
+          <h4 className="mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
+            Top 5 Active Channels
+          </h4>
+          <div className="inline-flex items-center gap-1.5 rounded-md bg-orange-50 px-2 py-1 text-xs font-medium text-orange-700 ring-1 ring-orange-700/10 ring-inset dark:bg-orange-900/20 dark:text-orange-400 dark:ring-orange-400/30">
+            No Engagement
+          </div>
+        </div>
       )
     }
 
-    const renderTopActiveChannels = () => {
-      if (!snapshot) return null
-
-      if (
-        !snapshot.channelCommunications ||
-        Object.keys(snapshot.channelCommunications).length <= 0
-      ) {
-        return (
-          <div className="mt-4 w-full">
-            <h4 className="mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
-              Top 5 Active Channels
-            </h4>
-            <div className="inline-flex items-center gap-1.5 rounded-md bg-orange-50 px-2 py-1 text-xs font-medium text-orange-700 ring-1 ring-orange-700/10 ring-inset dark:bg-orange-900/20 dark:text-orange-400 dark:ring-orange-400/30">
-              No Engagement
-            </div>
-          </div>
-        )
-      }
-
-      const sortedChannels = sortChannelsByMessageCount(
-        Object.entries(snapshot.channelCommunications)
-      )
+    const sortedChannels = sortChannelsByMessageCount(
+      Object.entries(snapshot.channelCommunications)
+    )
 
-      if (sortedChannels.length === 0) return null
+    if (sortedChannels.length === 0) return null
 
-      const topChannel = sortedChannels[0]
-      const [topChannelName, topChannelCount] = topChannel
+    const topChannel = sortedChannels[0]
+    const [topChannelName, topChannelCount] = topChannel
 
-      return (
-        <div className="mt-4 w-full">
-          <div className="mb-3">
-            <h4 className="mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
-              Top 5 Active Channels
-            </h4>
-            <a
-              href={`https://owasp.slack.com/archives/${topChannelName}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-1.5 rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-green-700/10 ring-inset hover:bg-green-100 dark:bg-green-900/20 dark:text-green-400 dark:ring-green-400/30 dark:hover:bg-green-900/30"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <span>#{topChannelName}</span>
-              <span className="rounded bg-green-100 px-1.5 py-0.5 text-[10px] font-semibold text-green-800 dark:bg-green-800/40 dark:text-green-300">
-                {Number(topChannelCount)} messages
-              </span>
-            </a>
-          </div>
-          {sortedChannels.length > 1 && (
-            <div>
-              <div className="flex flex-wrap gap-2">
-                {sortedChannels
-                  .slice(1)
-                  .map(([channelName, messageCount]) =>
-                    renderChannelLink(channelName, messageCount)
-                  )}
-              </div>
-            </div>
-          )}
+    return (
+      <div className="mt-4 w-full">
+        <div className="mb-3">
+          <h4 className="mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
+            Top 5 Active Channels
+          </h4>
+          <a
+            href={`https://owasp.slack.com/archives/${topChannelName}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1.5 rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-green-700/10 ring-inset hover:bg-green-100 dark:bg-green-900/20 dark:text-green-400 dark:ring-green-400/30 dark:hover:bg-green-900/30"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <span>#{topChannelName}</span>
+            <span className="rounded bg-green-100 px-1.5 py-0.5 text-[10px] font-semibold text-green-800 dark:bg-green-800/40 dark:text-green-300">
+              {Number(topChannelCount)} messages
+            </span>
+          </a>
         </div>
-      )
-    }
+        {sortedChannels.length > 1 && (
+          <div>
+            <div className="flex flex-wrap gap-2">
+              {sortedChannels
+                .slice(1)
+                .map(([channelName, messageCount]) => renderChannelLink(channelName, messageCount))}
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  }
 
-    const { data: snapshotData } = useQuery(GetMemberSnapshotDocument, {
-      variables: {
-        userLogin: candidate.member?.login || '',
-      },
-      skip: !candidate.member?.login,
-    })
+  const { data: snapshotData } = useQuery(GetMemberSnapshotDocument, {
+    variables: {
+      userLogin: candidate.member?.login || '',
+    },
+    skip: !candidate.member?.login,
+  })
 
-    useEffect(() => {
-      if (snapshotData?.memberSnapshot) {
-        setSnapshot(snapshotData.memberSnapshot)
-      }
-    }, [snapshotData])
+  useEffect(() => {
+    if (snapshotData?.memberSnapshot) {
+      setSnapshot(snapshotData.memberSnapshot)
+    }
+  }, [snapshotData])
 
-    // Fetch chapters based on chapterContributions keys
-    useEffect(() => {
-      const fetchChapters = async () => {
-        if (!snapshot?.chapterContributions) return
+  // Fetch chapters based on chapterContributions keys
+  useEffect(() => {
+    const fetchChapters = async () => {
+      if (!snapshot?.chapterContributions) return
 
-        const chapterKeys = Object.keys(snapshot.chapterContributions)
-        const chapters: Chapter[] = []
+      const chapterKeys = Object.keys(snapshot.chapterContributions)
+      const chapters: Chapter[] = []
 
-        for (const key of chapterKeys) {
-          try {
-            const { data } = await client.query({
-              query: GetChapterByKeyDocument,
-              variables: { key: key.replace('www-chapter-', '') },
-            })
+      for (const key of chapterKeys) {
+        try {
+          const { data } = await client.query({
+            query: GetChapterByKeyDocument,
+            variables: { key: key.replace('www-chapter-', '') },
+          })
 
-            if (data?.chapter) {
-              chapters.push(data.chapter)
-            }
-          } catch {
-            // Silently skip chapters that fail to fetch
+          if (data?.chapter) {
+            chapters.push(data.chapter)
           }
+        } catch {
+          // Silently skip chapters that fail to fetch
         }
-
-        setLedChapters(sortByName(chapters))
       }
 
-      fetchChapters()
-    }, [client, snapshot?.chapterContributions])
+      setLedChapters(sortByName(chapters))
+    }
 
-    // Fetch projects based on projectContributions keys
-    useEffect(() => {
-      const fetchProjects = async () => {
-        if (!snapshot?.projectContributions) return
+    fetchChapters()
+  }, [client, snapshot?.chapterContributions])
 
-        const projectKeys = Object.keys(snapshot.projectContributions)
-        const projects: Project[] = []
+  // Fetch projects based on projectContributions keys
+  useEffect(() => {
+    const fetchProjects = async () => {
+      if (!snapshot?.projectContributions) return
 
-        for (const key of projectKeys) {
-          try {
-            const { data } = await client.query({
-              query: GetProjectByKeyDocument,
-              variables: { key: key.replace('www-project-', '') },
-            })
+      const projectKeys = Object.keys(snapshot.projectContributions)
+      const projects: Project[] = []
 
-            if (data?.project) {
-              projects.push(data.project)
-            }
-          } catch {
-            // Silently skip projects that fail to fetch
+      for (const key of projectKeys) {
+        try {
+          const { data } = await client.query({
+            query: GetProjectByKeyDocument,
+            variables: { key: key.replace('www-project-', '') },
+          })
+
+          if (data?.project) {
+            projects.push(data.project)
           }
+        } catch {
+          // Silently skip projects that fail to fetch
         }
-
-        setLedProjects(sortByName(projects))
       }
 
-      fetchProjects()
-    }, [client, snapshot?.projectContributions])
-
-    const handleCardClick = () => {
-      // Convert name to slug format.
-      const nameSlug = candidate.memberName.toLowerCase().replaceAll(/\s+/g, '_')
-      const candidateUrl = `https://owasp.org/www-board-candidates/${year}/${nameSlug}.html`
-      window.open(candidateUrl, '_blank', 'noopener,noreferrer')
+      setLedProjects(sortByName(projects))
     }
 
-    // Check if candidate leads any flagship level projects
-    const leadsFlagshipProject = ledProjects.some((project) => project.level === 'flagship')
+    fetchProjects()
+  }, [client, snapshot?.projectContributions])
 
-    return (
-      <Button
-        onPress={handleCardClick}
-        className="group flex h-full w-full flex-col items-start justify-start rounded-lg bg-white p-6 text-left shadow-lg transition-transform duration-300 hover:scale-105 hover:shadow-xl dark:bg-gray-800 dark:shadow-gray-900/30"
-      >
-        <div className="flex w-full items-start gap-4">
-          {candidate.member?.avatarUrl && (
-            <div className="relative h-20 w-20 shrink-0 overflow-hidden rounded-full ring-2 ring-gray-100 group-hover:ring-blue-400 dark:ring-gray-700">
-              <Image
-                fill
-                src={`${candidate.member.avatarUrl}&s=160`}
-                alt={candidate.memberName}
-                className="object-cover"
-              />
-            </div>
-          )}
-          <div className="min-w-0 flex-1">
-            <h3 className="flex items-center gap-2 truncate text-xl font-bold text-gray-900 dark:text-white">
-              {candidate.memberName}
-              {candidate.member?.linkedinPageId && (
-                <a
-                  href={`https://linkedin.com/in/${candidate.member.linkedinPageId}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    e.preventDefault()
-                    if (candidate.member?.linkedinPageId) {
-                      window.open(
-                        `https://linkedin.com/in/${candidate.member.linkedinPageId}`,
-                        '_blank',
-                        'noopener,noreferrer'
-                      )
-                    }
-                  }}
-                  className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
-                  aria-label={`${candidate.memberName}'s LinkedIn profile`}
-                >
-                  <FaLinkedin className="h-5 w-5" />
-                </a>
-              )}
-            </h3>
-            {candidate.member?.login && (
-              <Link
-                href={`https://github.com/${candidate.member.login}`}
+  const handleCardClick = () => {
+    // Convert name to slug format.
+    const nameSlug = candidate.memberName.toLowerCase().replaceAll(/\s+/g, '_')
+    const candidateUrl = `https://owasp.org/www-board-candidates/${year}/${nameSlug}.html`
+    window.open(candidateUrl, '_blank', 'noopener,noreferrer')
+  }
+
+  // Check if candidate leads any flagship level projects
+  const leadsFlagshipProject = ledProjects.some((project) => project.level === 'flagship')
+
+  return (
+    <Button
+      onPress={handleCardClick}
+      className="group flex h-full w-full flex-col items-start justify-start rounded-lg bg-white p-6 text-left shadow-lg transition-transform duration-300 hover:scale-105 hover:shadow-xl dark:bg-gray-800 dark:shadow-gray-900/30"
+    >
+      <div className="flex w-full items-start gap-4">
+        {candidate.member?.avatarUrl && (
+          <div className="relative h-20 w-20 shrink-0 overflow-hidden rounded-full ring-2 ring-gray-100 group-hover:ring-blue-400 dark:ring-gray-700">
+            <Image
+              fill
+              src={`${candidate.member.avatarUrl}&s=160`}
+              alt={candidate.memberName}
+              className="object-cover"
+            />
+          </div>
+        )}
+        <div className="min-w-0 flex-1">
+          <h3 className="flex items-center gap-2 truncate text-xl font-bold text-gray-900 dark:text-white">
+            {candidate.memberName}
+            {candidate.member?.linkedinPageId && (
+              <a
+                href={`https://linkedin.com/in/${candidate.member.linkedinPageId}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="truncate text-sm text-blue-400 hover:underline"
-                onClick={(e) => e.stopPropagation()}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  e.preventDefault()
+                  if (candidate.member?.linkedinPageId) {
+                    window.open(
+                      `https://linkedin.com/in/${candidate.member.linkedinPageId}`,
+                      '_blank',
+                      'noopener,noreferrer'
+                    )
+                  }
+                }}
+                className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+                aria-label={`${candidate.memberName}'s LinkedIn profile`}
               >
-                @{candidate.member.login}
-              </Link>
-            )}
-            {candidate.member?.createdAt != null && (
-              <p className="mt-1 truncate text-sm text-gray-600 dark:text-gray-400">
-                GitHub account created{' '}
-                <span className="font-semibold text-gray-800 dark:text-gray-300">
-                  {dayjs(
-                    typeof candidate.member.createdAt === 'number'
-                      ? candidate.member.createdAt * 1000
-                      : candidate.member.createdAt
-                  ).fromNow()}
-                </span>{' '}
-                - {formatDate(candidate.member.createdAt)}
-              </p>
+                <FaLinkedin className="h-5 w-5" />
+              </a>
             )}
-            {candidate.member?.firstOwaspContributionAt != null && (
-              <p className="truncate text-sm text-gray-600 dark:text-gray-400">
-                First OWASP contribution made nearly{' '}
-                <span className="font-semibold text-gray-800 dark:text-gray-300">
-                  {dayjs(candidate.member.firstOwaspContributionAt * 1000).fromNow()}
-                </span>{' '}
-                - {formatDate(candidate.member.firstOwaspContributionAt)}
-              </p>
-            )}
-          </div>
-        </div>
-
-        <div className="mt-4" style={{ width: '100%', minWidth: 0, minHeight: '3.75rem' }}>
-          {candidate.member?.bio && (
-            <div
-              style={
-                {
-                  fontSize: '0.875rem',
-                  lineHeight: '1.25rem',
-                  color: 'inherit',
-                  display: '-webkit-box',
-                  // eslint-disable-next-line @typescript-eslint/naming-convention
-                  WebkitLineClamp: 3,
-                  // eslint-disable-next-line @typescript-eslint/naming-convention
-                  WebkitBoxOrient: 'vertical',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  wordWrap: 'break-word',
-                  overflowWrap: 'break-word',
-                  whiteSpace: 'normal',
-                } as const
-              }
-              className="text-gray-700 dark:text-gray-300"
+          </h3>
+          {candidate.member?.login && (
+            <Link
+              href={`https://github.com/${candidate.member.login}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="truncate text-sm text-blue-400 hover:underline"
+              onClick={(e) => e.stopPropagation()}
             >
-              {candidate.member.bio.replaceAll(/\n+/g, ' ').replaceAll(/\s+/g, ' ').trim()}
-            </div>
+              @{candidate.member.login}
+            </Link>
+          )}
+          {candidate.member?.createdAt != null && (
+            <p className="mt-1 truncate text-sm text-gray-600 dark:text-gray-400">
+              GitHub account created{' '}
+              <span className="font-semibold text-gray-800 dark:text-gray-300">
+                {dayjs(
+                  typeof candidate.member.createdAt === 'number'
+                    ? candidate.member.createdAt * 1000
+                    : candidate.member.createdAt
+                ).fromNow()}
+              </span>{' '}
+              - {formatDate(candidate.member.createdAt)}
+            </p>
+          )}
+          {candidate.member?.firstOwaspContributionAt != null && (
+            <p className="truncate text-sm text-gray-600 dark:text-gray-400">
+              First OWASP contribution made nearly{' '}
+              <span className="font-semibold text-gray-800 dark:text-gray-300">
+                {dayjs(candidate.member.firstOwaspContributionAt * 1000).fromNow()}
+              </span>{' '}
+              - {formatDate(candidate.member.firstOwaspContributionAt)}
+            </p>
           )}
         </div>
+      </div>
 
-        {candidate.description && (
-          <p className="mt-4 line-clamp-3 text-sm text-gray-700 dark:text-gray-300">
-            {candidate.description}
-          </p>
+      <div className="mt-4" style={{ width: '100%', minWidth: 0, minHeight: '3.75rem' }}>
+        {candidate.member?.bio && (
+          <div
+            style={
+              {
+                fontSize: '0.875rem',
+                lineHeight: '1.25rem',
+                color: 'inherit',
+                display: '-webkit-box',
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                WebkitLineClamp: 3,
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                wordWrap: 'break-word',
+                overflowWrap: 'break-word',
+                whiteSpace: 'normal',
+              } as const
+            }
+            className="text-gray-700 dark:text-gray-300"
+          >
+            {candidate.member.bio.replaceAll(/\n+/g, ' ').replaceAll(/\s+/g, ' ').trim()}
+          </div>
         )}
+      </div>
 
-        {snapshot && (
-          <div className="mt-4 w-full border-t border-gray-200 pt-4 dark:border-gray-700">
-            <h4 className="mb-2 text-sm text-gray-700 dark:text-gray-300">
-              <span className="font-semibold">OWASP Ecosystem Contributions</span>
-            </h4>
-            <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
-              <div className="flex items-center gap-2">
-                <FaCode className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                <div>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Commits</p>
-                  <p className="font-semibold text-gray-900 dark:text-white">
-                    {millify(snapshot.commitsCount, { precision: 1 })}
-                  </p>
-                </div>
+      {candidate.description && (
+        <p className="mt-4 line-clamp-3 text-sm text-gray-700 dark:text-gray-300">
+          {candidate.description}
+        </p>
+      )}
+
+      {snapshot && (
+        <div className="mt-4 w-full border-t border-gray-200 pt-4 dark:border-gray-700">
+          <h4 className="mb-2 text-sm text-gray-700 dark:text-gray-300">
+            <span className="font-semibold">OWASP Ecosystem Contributions</span>
+          </h4>
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+            <div className="flex items-center gap-2">
+              <FaCode className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+              <div>
+                <p className="text-xs text-gray-500 dark:text-gray-400">Commits</p>
+                <p className="font-semibold text-gray-900 dark:text-white">
+                  {millify(snapshot.commitsCount, { precision: 1 })}
+                </p>
               </div>
-              <div className="flex items-center gap-2">
-                <FaCodeBranch className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                <div>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">PRs</p>
-                  <p className="font-semibold text-gray-900 dark:text-white">
-                    {millify(snapshot.pullRequestsCount, { precision: 1 })}
-                  </p>
-                </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <FaCodeBranch className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+              <div>
+                <p className="text-xs text-gray-500 dark:text-gray-400">PRs</p>
+                <p className="font-semibold text-gray-900 dark:text-white">
+                  {millify(snapshot.pullRequestsCount, { precision: 1 })}
+                </p>
               </div>
-              <div className="flex items-center gap-2">
-                <FaExclamationCircle className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                <div>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Issues</p>
-                  <p className="font-semibold text-gray-900 dark:text-white">
-                    {millify(snapshot.issuesCount, { precision: 1 })}
-                  </p>
-                </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <FaExclamationCircle className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+              <div>
+                <p className="text-xs text-gray-500 dark:text-gray-400">Issues</p>
+                <p className="font-semibold text-gray-900 dark:text-white">
+                  {millify(snapshot.issuesCount, { precision: 1 })}
+                </p>
               </div>
-              <div className="flex items-center gap-2">
-                <FaCodeMerge className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                <div>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Total</p>
-                  <p className="font-semibold text-gray-900 dark:text-white">
-                    {millify(snapshot.totalContributions, { precision: 1 })}
-                  </p>
-                </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <FaCodeMerge className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+              <div>
+                <p className="text-xs text-gray-500 dark:text-gray-400">Total</p>
+                <p className="font-semibold text-gray-900 dark:text-white">
+                  {millify(snapshot.totalContributions, { precision: 1 })}
+                </p>
               </div>
             </div>
-            {snapshot.contributionHeatmapData &&
-              Object.keys(snapshot.contributionHeatmapData).length > 0 && (
-                <div className="mt-3">
-                  <ContributionHeatmap
-                    contributionData={snapshot.contributionHeatmapData}
-                    startDate={snapshot.startAt}
-                    endDate={snapshot.endAt}
-                    variant="compact"
-                  />
-                </div>
+          </div>
+          {snapshot.contributionHeatmapData &&
+            Object.keys(snapshot.contributionHeatmapData).length > 0 && (
+              <div className="mt-3">
+                <ContributionHeatmap
+                  contributionData={snapshot.contributionHeatmapData}
+                  startDate={snapshot.startAt}
+                  endDate={snapshot.endAt}
+                  variant="compact"
+                />
+              </div>
+            )}
+          <div className="mt-4 w-full">
+            <h4 className="mb-2 text-sm text-gray-700 dark:text-gray-300">
+              <span className="font-semibold">Leadership</span>
+              {(ledChapters.length > 0 || ledProjects.length > 0) && (
+                <span className="font-normal">
+                  {' '}
+                  (
+                  {ledChapters.length > 0 && (
+                    <>
+                      {ledChapters.length} chapter{ledChapters.length === 1 ? '' : 's'}
+                    </>
+                  )}
+                  {ledChapters.length > 0 && ledProjects.length > 0 && ', '}
+                  {ledProjects.length > 0 && (
+                    <>
+                      {ledProjects.length} project{ledProjects.length === 1 ? '' : 's'}
+                    </>
+                  )}
+                  )
+                </span>
               )}
-            <div className="mt-4 w-full">
-              <h4 className="mb-2 text-sm text-gray-700 dark:text-gray-300">
-                <span className="font-semibold">Leadership</span>
-                {(ledChapters.length > 0 || ledProjects.length > 0) && (
-                  <span className="font-normal">
-                    {' '}
-                    (
-                    {ledChapters.length > 0 && (
-                      <>
-                        {ledChapters.length} chapter{ledChapters.length === 1 ? '' : 's'}
-                      </>
-                    )}
-                    {ledChapters.length > 0 && ledProjects.length > 0 && ', '}
-                    {ledProjects.length > 0 && (
-                      <>
-                        {ledProjects.length} project{ledProjects.length === 1 ? '' : 's'}
-                      </>
-                    )}
-                    )
-                  </span>
-                )}
-              </h4>
-              {ledChapters.length === 0 && ledProjects.length === 0 ? (
-                <div className="inline-flex items-center gap-1.5 rounded-md bg-orange-50 px-2 py-1 text-xs font-medium text-orange-700 ring-1 ring-orange-700/10 ring-inset dark:bg-orange-900/20 dark:text-orange-400 dark:ring-orange-400/30">
-                  No chapters or projects are lead by this candidate
-                </div>
-              ) : (
-                <div className="flex flex-wrap gap-2">
-                  {ledChapters.map((chapter) => {
-                    // Strip prefix if present to get bare key
-                    const bareKey = chapter.key.startsWith('www-chapter-')
-                      ? chapter.key.replace('www-chapter-', '')
-                      : chapter.key
-                    // Check both key formats for compatibility
-                    const directKey = snapshot?.chapterContributions?.[bareKey]
-                    const withPrefix = snapshot?.chapterContributions?.[`www-chapter-${bareKey}`]
-                    const contributionCount = directKey || withPrefix || 0
-
-                    return (
-                      <Link
-                        key={chapter.id}
-                        href={`/chapters/${chapter.key.replace('www-chapter-', '')}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className={`inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${
+            </h4>
+            {ledChapters.length === 0 && ledProjects.length === 0 ? (
+              <div className="inline-flex items-center gap-1.5 rounded-md bg-orange-50 px-2 py-1 text-xs font-medium text-orange-700 ring-1 ring-orange-700/10 ring-inset dark:bg-orange-900/20 dark:text-orange-400 dark:ring-orange-400/30">
+                No chapters or projects are lead by this candidate
+              </div>
+            ) : (
+              <div className="flex flex-wrap gap-2">
+                {ledChapters.map((chapter) => {
+                  // Strip prefix if present to get bare key
+                  const bareKey = chapter.key.startsWith('www-chapter-')
+                    ? chapter.key.replace('www-chapter-', '')
+                    : chapter.key
+                  // Check both key formats for compatibility
+                  const directKey = snapshot?.chapterContributions?.[bareKey]
+                  const withPrefix = snapshot?.chapterContributions?.[`www-chapter-${bareKey}`]
+                  const contributionCount = directKey || withPrefix || 0
+
+                  return (
+                    <Link
+                      key={chapter.id}
+                      href={`/chapters/${chapter.key.replace('www-chapter-', '')}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className={`inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${
+                        contributionCount === 0
+                          ? 'bg-orange-50 text-orange-700 ring-orange-700/10 hover:bg-orange-100 dark:bg-orange-900/20 dark:text-orange-400 dark:ring-orange-400/30 dark:hover:bg-orange-900/30'
+                          : 'bg-blue-50 text-blue-700 ring-blue-700/10 hover:bg-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:ring-blue-400/30 dark:hover:bg-blue-900/30'
+                      }`}
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <span>{chapter.name}</span>
+                      <span
+                        className={`rounded px-1.5 py-0.5 text-[10px] font-semibold ${
                           contributionCount === 0
-                            ? 'bg-orange-50 text-orange-700 ring-orange-700/10 hover:bg-orange-100 dark:bg-orange-900/20 dark:text-orange-400 dark:ring-orange-400/30 dark:hover:bg-orange-900/30'
-                            : 'bg-blue-50 text-blue-700 ring-blue-700/10 hover:bg-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:ring-blue-400/30 dark:hover:bg-blue-900/30'
+                            ? 'bg-orange-100 text-orange-800 dark:bg-orange-800/40 dark:text-orange-300'
+                            : 'bg-blue-100 text-blue-800 dark:bg-blue-800/40 dark:text-blue-300'
                         }`}
-                        onClick={(e) => e.stopPropagation()}
                       >
-                        <span>{chapter.name}</span>
-                        <span
-                          className={`rounded px-1.5 py-0.5 text-[10px] font-semibold ${
-                            contributionCount === 0
-                              ? 'bg-orange-100 text-orange-800 dark:bg-orange-800/40 dark:text-orange-300'
-                              : 'bg-blue-100 text-blue-800 dark:bg-blue-800/40 dark:text-blue-300'
-                          }`}
-                        >
-                          {contributionCount === 0
-                            ? 'no contributions'
-                            : `${contributionCount} contributions`}
-                        </span>
-                      </Link>
-                    )
-                  })}
-                  {ledProjects.map((project) => {
-                    // Strip prefix if present to get bare key
-                    const bareKey = project.key.startsWith('www-project-')
-                      ? project.key.replace('www-project-', '')
-                      : project.key
-                    // Check both key formats for compatibility
-                    const directKey = snapshot?.projectContributions?.[bareKey]
-                    const withPrefix = snapshot?.projectContributions?.[`www-project-${bareKey}`]
-                    const contributionCount = directKey || withPrefix || 0
-                    return (
-                      <Link
-                        key={project.id}
-                        href={`/projects/${project.key.replace('www-project-', '')}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className={`inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${
+                        {contributionCount === 0
+                          ? 'no contributions'
+                          : `${contributionCount} contributions`}
+                      </span>
+                    </Link>
+                  )
+                })}
+                {ledProjects.map((project) => {
+                  // Strip prefix if present to get bare key
+                  const bareKey = project.key.startsWith('www-project-')
+                    ? project.key.replace('www-project-', '')
+                    : project.key
+                  // Check both key formats for compatibility
+                  const directKey = snapshot?.projectContributions?.[bareKey]
+                  const withPrefix = snapshot?.projectContributions?.[`www-project-${bareKey}`]
+                  const contributionCount = directKey || withPrefix || 0
+                  return (
+                    <Link
+                      key={project.id}
+                      href={`/projects/${project.key.replace('www-project-', '')}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className={`inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${
+                        contributionCount === 0
+                          ? 'bg-orange-50 text-orange-700 ring-orange-700/10 hover:bg-orange-100 dark:bg-orange-900/20 dark:text-orange-400 dark:ring-orange-400/30 dark:hover:bg-orange-900/30'
+                          : 'bg-blue-50 text-blue-700 ring-blue-700/10 hover:bg-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:ring-blue-400/30 dark:hover:bg-blue-900/30'
+                      }`}
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <span>{project.name}</span>
+                      <span
+                        className={`rounded px-1.5 py-0.5 text-[10px] font-semibold ${
                           contributionCount === 0
-                            ? 'bg-orange-50 text-orange-700 ring-orange-700/10 hover:bg-orange-100 dark:bg-orange-900/20 dark:text-orange-400 dark:ring-orange-400/30 dark:hover:bg-orange-900/30'
-                            : 'bg-blue-50 text-blue-700 ring-blue-700/10 hover:bg-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:ring-blue-400/30 dark:hover:bg-blue-900/30'
+                            ? 'bg-orange-100 text-orange-800 dark:bg-orange-800/40 dark:text-orange-300'
+                            : 'bg-blue-100 text-blue-800 dark:bg-blue-800/40 dark:text-blue-300'
                         }`}
-                        onClick={(e) => e.stopPropagation()}
-                      >
-                        <span>{project.name}</span>
-                        <span
-                          className={`rounded px-1.5 py-0.5 text-[10px] font-semibold ${
-                            contributionCount === 0
-                              ? 'bg-orange-100 text-orange-800 dark:bg-orange-800/40 dark:text-orange-300'
-                              : 'bg-blue-100 text-blue-800 dark:bg-blue-800/40 dark:text-blue-300'
-                          }`}
-                        >
-                          {contributionCount === 0
-                            ? 'no contributions'
-                            : `${contributionCount} contributions`}
-                        </span>
-                      </Link>
-                    )
-                  })}
-                </div>
-              )}
-            </div>
-            {snapshot.repositoryContributions &&
-              Object.keys(snapshot.repositoryContributions).length > 0 &&
-              (() => {
-                const sortedRepos = sortByContributionCount(
-                  Object.entries(snapshot.repositoryContributions)
-                )
-                const topRepo = sortedRepos[0]
-                const [topRepoName, topRepoCount] = topRepo
-
-                return (
-                  <div className="mt-4 w-full">
-                    <div className="mb-3">
-                      <h4 className="mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
-                        Top 5 Active Repositories
-                      </h4>
-                      <a
-                        href={`https://github.com/${topRepoName}/commits?author=${candidate.member?.login}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="inline-flex items-center gap-1.5 rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-green-700/10 ring-inset hover:bg-green-100 dark:bg-green-900/20 dark:text-green-400 dark:ring-green-400/30 dark:hover:bg-green-900/30"
-                        onClick={(e) => e.stopPropagation()}
                       >
-                        <span>{topRepoName}</span>
-                        <span className="rounded bg-green-100 px-1.5 py-0.5 text-[10px] font-semibold text-green-800 dark:bg-green-800/40 dark:text-green-300">
-                          {Number(topRepoCount)} commits
-                        </span>
-                      </a>
-                    </div>
-                    {sortedRepos.length > 1 && (
-                      <div>
-                        <div className="flex flex-wrap gap-2">
-                          {sortedRepos
-                            .slice(1)
-                            .map(([repoName, count]) => renderRepositoryLink(repoName, count))}
-                        </div>
-                      </div>
-                    )}
+                        {contributionCount === 0
+                          ? 'no contributions'
+                          : `${contributionCount} contributions`}
+                      </span>
+                    </Link>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+          {snapshot.repositoryContributions &&
+            Object.keys(snapshot.repositoryContributions).length > 0 &&
+            (() => {
+              const sortedRepos = sortByContributionCount(
+                Object.entries(snapshot.repositoryContributions)
+              )
+              const topRepo = sortedRepos[0]
+              const [topRepoName, topRepoCount] = topRepo
+
+              return (
+                <div className="mt-4 w-full">
+                  <div className="mb-3">
+                    <h4 className="mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
+                      Top 5 Active Repositories
+                    </h4>
+                    <a
+                      href={`https://github.com/${topRepoName}/commits?author=${candidate.member?.login}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center gap-1.5 rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-green-700/10 ring-inset hover:bg-green-100 dark:bg-green-900/20 dark:text-green-400 dark:ring-green-400/30 dark:hover:bg-green-900/30"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <span>{topRepoName}</span>
+                      <span className="rounded bg-green-100 px-1.5 py-0.5 text-[10px] font-semibold text-green-800 dark:bg-green-800/40 dark:text-green-300">
+                        {Number(topRepoCount)} commits
+                      </span>
+                    </a>
                   </div>
-                )
-              })()}
+                  {sortedRepos.length > 1 && (
+                    <div>
+                      <div className="flex flex-wrap gap-2">
+                        {sortedRepos
+                          .slice(1)
+                          .map(([repoName, count]) => renderRepositoryLink(repoName, count))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )
+            })()}
+        </div>
+      )}
+
+      {/* Slack Communications Heatmap */}
+      {snapshot?.communicationHeatmapData &&
+        Object.keys(snapshot.communicationHeatmapData).length > 0 && (
+          <div className="mt-4 w-full border-t border-gray-200 pt-4 dark:border-gray-700">
+            <ContributionHeatmap
+              contributionData={snapshot.communicationHeatmapData}
+              startDate={snapshot.startAt}
+              endDate={snapshot.endAt}
+              title="OWASP Community Engagement"
+              unit="message"
+              variant="compact"
+            />
           </div>
         )}
 
-        {/* Slack Communications Heatmap */}
-        {snapshot?.communicationHeatmapData &&
-          Object.keys(snapshot.communicationHeatmapData).length > 0 && (
-            <div className="mt-4 w-full border-t border-gray-200 pt-4 dark:border-gray-700">
-              <ContributionHeatmap
-                contributionData={snapshot.communicationHeatmapData}
-                startDate={snapshot.startAt}
-                endDate={snapshot.endAt}
-                title="OWASP Community Engagement"
-                unit="message"
-                variant="compact"
-              />
+      {renderTopActiveChannels()}
+
+      {/* Additional Information */}
+      {(candidate.member?.isOwaspBoardMember ||
+        candidate.member?.isFormerOwaspStaff ||
+        candidate.member?.isGsocMentor ||
+        leadsFlagshipProject) && (
+        <div className="mt-4 w-full border-t border-gray-200 pt-4 dark:border-gray-700">
+          <h4 className="mb-2 text-sm text-gray-700 dark:text-gray-300">
+            <span className="font-semibold">Additional Information</span>
+          </h4>
+          <div className="flex flex-wrap gap-2">
+            {candidate.member?.isOwaspBoardMember && (
+              <span className="inline-flex items-center gap-1.5 rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-purple-700/10 ring-inset dark:bg-purple-900/20 dark:text-purple-400 dark:ring-purple-400/30">
+                OWASP Board of Directors Member
+              </span>
+            )}
+            {candidate.member?.isFormerOwaspStaff && (
+              <span className="inline-flex items-center gap-1.5 rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-purple-700/10 ring-inset dark:bg-purple-900/20 dark:text-purple-400 dark:ring-purple-400/30">
+                Former OWASP Staff Member
+              </span>
+            )}
+            {candidate.member?.isGsocMentor && (
+              <span className="inline-flex items-center gap-1.5 rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-purple-700/10 ring-inset dark:bg-purple-900/20 dark:text-purple-400 dark:ring-purple-400/30">
+                Google Summer of Code Mentor
+              </span>
+            )}
+          </div>
+          {leadsFlagshipProject && (
+            <div
+              className="mt-3 text-xs text-gray-600 dark:text-gray-400"
+              style={{
+                wordWrap: 'break-word',
+                overflowWrap: 'break-word',
+                whiteSpace: 'normal',
+              }}
+            >
+              This candidate may have additional community engagement in other Slack workspaces
+              based on the flagship level project(s) they are leading.
             </div>
           )}
+        </div>
+      )}
+    </Button>
+  )
+}
 
-        {renderTopActiveChannels()}
+const BoardCandidatesPage = () => {
+  const { year } = useParams<{ year: string }>()
+  const [candidates, setCandidates] = useState<CandidateWithSnapshot[]>([])
 
-        {/* Additional Information */}
-        {(candidate.member?.isOwaspBoardMember ||
-          candidate.member?.isFormerOwaspStaff ||
-          candidate.member?.isGsocMentor ||
-          leadsFlagshipProject) && (
-          <div className="mt-4 w-full border-t border-gray-200 pt-4 dark:border-gray-700">
-            <h4 className="mb-2 text-sm text-gray-700 dark:text-gray-300">
-              <span className="font-semibold">Additional Information</span>
-            </h4>
-            <div className="flex flex-wrap gap-2">
-              {candidate.member?.isOwaspBoardMember && (
-                <span className="inline-flex items-center gap-1.5 rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-purple-700/10 ring-inset dark:bg-purple-900/20 dark:text-purple-400 dark:ring-purple-400/30">
-                  OWASP Board of Directors Member
-                </span>
-              )}
-              {candidate.member?.isFormerOwaspStaff && (
-                <span className="inline-flex items-center gap-1.5 rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-purple-700/10 ring-inset dark:bg-purple-900/20 dark:text-purple-400 dark:ring-purple-400/30">
-                  Former OWASP Staff Member
-                </span>
-              )}
-              {candidate.member?.isGsocMentor && (
-                <span className="inline-flex items-center gap-1.5 rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-purple-700/10 ring-inset dark:bg-purple-900/20 dark:text-purple-400 dark:ring-purple-400/30">
-                  Google Summer of Code Mentor
-                </span>
-              )}
-            </div>
-            {leadsFlagshipProject && (
-              <div
-                className="mt-3 text-xs text-gray-600 dark:text-gray-400"
-                style={{
-                  wordWrap: 'break-word',
-                  overflowWrap: 'break-word',
-                  whiteSpace: 'normal',
-                }}
-              >
-                This candidate may have additional community engagement in other Slack workspaces
-                based on the flagship level project(s) they are leading.
-              </div>
-            )}
-          </div>
-        )}
-      </Button>
-    )
-  }
+  const {
+    data: graphQLData,
+    error: graphQLRequestError,
+    loading,
+  } = useQuery(GetBoardCandidatesDocument, {
+    variables: { year: Number.parseInt(year) },
+  })
+
+  useEffect(() => {
+    if (graphQLData?.boardOfDirectors) {
+      setCandidates(graphQLData.boardOfDirectors.candidates || [])
+    }
+    if (graphQLRequestError) {
+      handleAppError(graphQLRequestError)
+    }
+  }, [graphQLData, graphQLRequestError])
 
   if (loading) {
     return <LoadingSpinner />
@@ -752,7 +755,7 @@ const BoardCandidatesPage = () => {
       ) : (
         <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
           {candidates.map((candidate) => (
-            <CandidateCard key={candidate.id} candidate={candidate} />
+            <CandidateCard key={candidate.id} candidate={candidate} year={year} />
           ))}
         </div>
       )}
diff --git a/frontend/src/app/global-error.tsx b/frontend/src/app/global-error.tsx
index 6b0c5442b9..f3213ea415 100644
--- a/frontend/src/app/global-error.tsx
+++ b/frontend/src/app/global-error.tsx
@@ -91,17 +91,21 @@ export const handleAppError = (error: unknown) => {
 export const ErrorWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return (
     <Sentry.ErrorBoundary
-      fallback={({ error }) => {
-        Sentry.captureException(error)
-        const errorConfig = ERROR_CONFIGS['500']
-        return <ErrorDisplay {...errorConfig} />
-      }}
+      fallback={(props) => <SentryErrorFallback {...props} errorConfig={ERROR_CONFIGS['500']} />}
     >
       {children}
     </Sentry.ErrorBoundary>
   )
 }
 
+export const SentryErrorFallback: React.FC<{
+  error: unknown
+  errorConfig?: ErrorDisplayProps
+}> = ({ error, errorConfig = ERROR_CONFIGS['500'] }) => {
+  Sentry.captureException(error instanceof Error ? error : new Error(String(error)))
+  return <ErrorDisplay {...errorConfig} />
+}
+
 export default function GlobalError({ error }: Readonly<{ error: Error }>) {
   Sentry.captureException(error)
   const errorConfig = ERROR_CONFIGS['500']
diff --git a/frontend/src/app/members/[memberKey]/page.tsx b/frontend/src/app/members/[memberKey]/page.tsx
index 962008aed4..dabcbeca37 100644
--- a/frontend/src/app/members/[memberKey]/page.tsx
+++ b/frontend/src/app/members/[memberKey]/page.tsx
@@ -9,12 +9,76 @@ import { handleAppError, ErrorDisplay } from 'app/global-error'
 
 import { GetUserDataDocument } from 'types/__generated__/userQueries.generated'
 import { Badge } from 'types/badge'
+import { User } from 'types/user'
 import { formatDate } from 'utils/dateFormatter'
 import Badges from 'components/Badges'
 import DetailsCard from 'components/CardDetailsPage'
 import ContributionHeatmap from 'components/ContributionHeatmap'
 import MemberDetailsPageSkeleton from 'components/skeletons/MemberDetailsPageSkeleton'
 
+type DateRange = { startDate: string; endDate: string }
+
+interface UserSummaryProps {
+  user: User | null
+  contributionData: Record<string, number>
+  dateRange: DateRange
+  hasContributionData: boolean
+  formattedBio: React.ReactNode
+}
+
+export const UserSummary: React.FC<UserSummaryProps> = ({
+  user,
+  contributionData,
+  dateRange,
+  hasContributionData,
+  formattedBio,
+}) => (
+  <div className="mt-4 flex flex-col items-center lg:flex-row">
+    <Image
+      width={200}
+      height={200}
+      className="mr-4 h-[200px] w-[200px] rounded-full border-2 border-white bg-white object-cover shadow-md dark:border-gray-800 dark:bg-gray-600/60"
+      src={user?.avatarUrl || '/placeholder.svg'}
+      alt={user?.name || user?.login || 'User Avatar'}
+    />
+    <div className="w-full overflow-x-auto text-center lg:text-left">
+      <div className="pl-0 lg:pl-4">
+        <div className="flex items-center justify-center gap-3 text-center text-sm text-gray-500 lg:justify-start lg:text-left dark:text-gray-400">
+          <Link href={user?.url || '#'} className="text-xl font-bold text-blue-400 hover:underline">
+            @{user?.login}
+          </Link>
+          {user?.badges && user.badges.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              {user.badges.slice().map((badge: Badge) => (
+                <React.Fragment key={badge.id}>
+                  <Badges
+                    name={badge.name}
+                    cssClass={badge.cssClass || 'medal'}
+                    showTooltip={true}
+                  />
+                </React.Fragment>
+              ))}
+            </div>
+          )}
+        </div>
+        <p className="text-gray-600 dark:text-gray-400">{formattedBio}</p>
+      </div>
+      {hasContributionData && dateRange.startDate && dateRange.endDate && (
+        <div className="w-full lg:block">
+          <div className="overflow-x-auto rounded-lg bg-gray-100 dark:bg-gray-800">
+            <ContributionHeatmap
+              contributionData={contributionData}
+              startDate={dateRange.startDate}
+              endDate={dateRange.endDate}
+              variant="medium"
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  </div>
+)
+
 const UserDetailsPage: React.FC = () => {
   const { memberKey } = useParams<{ memberKey: string }>()
 
@@ -129,56 +193,6 @@ const UserDetailsPage: React.FC = () => {
     { icon: FaCodeMerge, value: user?.contributionsCount || 0, unit: 'Contribution' },
   ]
 
-  const UserSummary = () => (
-    <div className="mt-4 flex flex-col items-center lg:flex-row">
-      <Image
-        width={200}
-        height={200}
-        className="mr-4 h-[200px] w-[200px] rounded-full border-2 border-white bg-white object-cover shadow-md dark:border-gray-800 dark:bg-gray-600/60"
-        src={user?.avatarUrl || '/placeholder.svg'}
-        alt={user?.name || user?.login || 'User Avatar'}
-      />
-      <div className="w-full overflow-x-auto text-center lg:text-left">
-        <div className="pl-0 lg:pl-4">
-          <div className="flex items-center justify-center gap-3 text-center text-sm text-gray-500 lg:justify-start lg:text-left dark:text-gray-400">
-            <Link
-              href={user?.url || '#'}
-              className="text-xl font-bold text-blue-400 hover:underline"
-            >
-              @{user?.login}
-            </Link>
-            {user?.badges && user.badges.length > 0 && (
-              <div className="flex flex-wrap gap-2">
-                {user.badges.slice().map((badge: Badge) => (
-                  <React.Fragment key={badge.id}>
-                    <Badges
-                      name={badge.name}
-                      cssClass={badge.cssClass || 'medal'}
-                      showTooltip={true}
-                    />
-                  </React.Fragment>
-                ))}
-              </div>
-            )}
-          </div>
-          <p className="text-gray-600 dark:text-gray-400">{formattedBio}</p>
-        </div>
-        {hasContributionData && dateRange.startDate && dateRange.endDate && (
-          <div className="w-full lg:block">
-            <div className="overflow-x-auto rounded-lg bg-gray-100 dark:bg-gray-800">
-              <ContributionHeatmap
-                contributionData={contributionData}
-                startDate={dateRange.startDate}
-                endDate={dateRange.endDate}
-                variant="medium"
-              />
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-
   return (
     <DetailsCard
       details={userDetails}
@@ -191,7 +205,15 @@ const UserDetailsPage: React.FC = () => {
       stats={userStats}
       title={user?.name || user?.login}
       type="user"
-      userSummary={<UserSummary />}
+      userSummary={
+        <UserSummary
+          user={user}
+          contributionData={contributionData}
+          dateRange={dateRange}
+          hasContributionData={hasContributionData}
+          formattedBio={formattedBio}
+        />
+      }
     />
   )
 }
diff --git a/frontend/src/components/SkeletonsBase.tsx b/frontend/src/components/SkeletonsBase.tsx
index 96577819bd..fd30b4aa3a 100644
--- a/frontend/src/components/SkeletonsBase.tsx
+++ b/frontend/src/components/SkeletonsBase.tsx
@@ -1,4 +1,5 @@
 import { Skeleton } from '@heroui/skeleton'
+import React from 'react'
 import LoadingSpinner from 'components/LoadingSpinner'
 import AboutSkeleton from 'components/skeletons/AboutSkeleton'
 import CardSkeleton from 'components/skeletons/Card'
@@ -6,6 +7,19 @@ import MemberDetailsPageSkeleton from 'components/skeletons/MemberDetailsPageSke
 import OrganizationDetailsPageSkeleton from 'components/skeletons/OrganizationDetailsPageSkeleton'
 import SnapshotSkeleton from 'components/skeletons/SnapshotSkeleton'
 import UserCardSkeleton from 'components/skeletons/UserCard'
+
+type CardSkeletonComponentProps = {
+  showLevel?: boolean
+  showIcons?: boolean
+  showLink?: boolean
+  numIcons?: number
+  showContributors?: boolean
+  showSocial?: boolean
+}
+
+export const CardSkeletonComponent: React.FC<CardSkeletonComponentProps> = (props) => (
+  <CardSkeleton {...props} />
+)
 function userCardRender() {
   const cardCount = 12
   return (
@@ -35,31 +49,30 @@ const SkeletonBase = ({
   indexName: string
   loadingImageUrl: string
 }) => {
-  let Component
+  let Component: React.FC<CardSkeletonComponentProps> = CardSkeletonComponent
+  let componentProps: CardSkeletonComponentProps = {}
   switch (indexName) {
     case 'chapters':
-      Component = () => <CardSkeleton showLevel={false} showIcons={false} showLink={false} />
+      Component = CardSkeletonComponent
+      componentProps = { showLevel: false, showIcons: false, showLink: false }
       break
     case 'issues':
-      Component = () => (
-        <CardSkeleton
-          showLevel={false}
-          showIcons={true}
-          numIcons={2}
-          showContributors={false}
-          showSocial={false}
-        />
-      )
+      Component = CardSkeletonComponent
+      componentProps = {
+        showLevel: false,
+        showIcons: true,
+        numIcons: 2,
+        showContributors: false,
+        showSocial: false,
+      }
       break
     case 'projects':
-      Component = () => (
-        <CardSkeleton showLink={false} showSocial={false} showIcons={true} numIcons={3} />
-      )
+      Component = CardSkeletonComponent
+      componentProps = { showLink: false, showSocial: false, showIcons: true, numIcons: 3 }
       break
     case 'committees':
-      Component = () => (
-        <CardSkeleton showLink={false} showLevel={false} showIcons={true} numIcons={1} />
-      )
+      Component = CardSkeletonComponent
+      componentProps = { showLink: false, showLevel: false, showIcons: true, numIcons: 1 }
       break
     case 'users':
       return userCardRender()
@@ -82,11 +95,11 @@ const SkeletonBase = ({
       {indexName == 'chapters' ? (
         <Skeleton className="mb-2 h-96 w-full max-w-6xl" />
       ) : (
-        <Component />
+        <Component {...componentProps} />
       )}
-      <Component />
-      <Component />
-      <Component />
+      <Component {...componentProps} />
+      <Component {...componentProps} />
+      <Component {...componentProps} />
     </div>
   )
 }

From dd402750c11a15ded8c135d3c486169190e27c32 Mon Sep 17 00:00:00 2001
From: Anurag Yadav <anuragyadav2787@gmail.com>
Date: Wed, 11 Feb 2026 22:18:32 +0530
Subject: [PATCH 2/4] fixed code rabbit review

---
 .../src/app/board/[year]/candidates/page.tsx  | 22 ++++++----------
 frontend/src/app/global-error.tsx             | 10 +++++--
 frontend/src/components/SkeletonsBase.tsx     | 26 +++++++------------
 3 files changed, 26 insertions(+), 32 deletions(-)

diff --git a/frontend/src/app/board/[year]/candidates/page.tsx b/frontend/src/app/board/[year]/candidates/page.tsx
index b28e944cb7..f29d0f61ac 100644
--- a/frontend/src/app/board/[year]/candidates/page.tsx
+++ b/frontend/src/app/board/[year]/candidates/page.tsx
@@ -92,7 +92,6 @@ interface CandidateCardProps {
 
 const CandidateCard = ({ candidate, year }: CandidateCardProps) => {
   const client = useApolloClient()
-  const [snapshot, setSnapshot] = useState<MemberSnapshot | null>(null)
   const [ledChapters, setLedChapters] = useState<Chapter[]>([])
   const [ledProjects, setLedProjects] = useState<Project[]>([])
 
@@ -110,7 +109,7 @@ const CandidateCard = ({ candidate, year }: CandidateCardProps) => {
     return [...entries].sort(([, a], [, b]) => b - a)
   }
 
-  // Render a single repository link item
+  // Render a single channel link item
   const renderChannelLink = (channelName: string, messageCount: string | number) => (
     <a
       key={channelName}
@@ -213,12 +212,8 @@ const CandidateCard = ({ candidate, year }: CandidateCardProps) => {
     },
     skip: !candidate.member?.login,
   })
-
-  useEffect(() => {
-    if (snapshotData?.memberSnapshot) {
-      setSnapshot(snapshotData.memberSnapshot)
-    }
-  }, [snapshotData])
+  // Derive snapshot directly from the query result to avoid an extra render
+  const snapshot: MemberSnapshot | null = snapshotData?.memberSnapshot ?? null
 
   // Fetch chapters based on chapterContributions keys
   useEffect(() => {
@@ -666,8 +661,6 @@ const CandidateCard = ({ candidate, year }: CandidateCardProps) => {
 
 const BoardCandidatesPage = () => {
   const { year } = useParams<{ year: string }>()
-  const [candidates, setCandidates] = useState<CandidateWithSnapshot[]>([])
-
   const {
     data: graphQLData,
     error: graphQLRequestError,
@@ -676,14 +669,15 @@ const BoardCandidatesPage = () => {
     variables: { year: Number.parseInt(year) },
   })
 
+  // Derive candidates directly from GraphQL data to avoid an extra render
+  const candidates: CandidateWithSnapshot[] = graphQLData?.boardOfDirectors?.candidates ?? []
+
+  // Keep reporting errors as a side-effect only
   useEffect(() => {
-    if (graphQLData?.boardOfDirectors) {
-      setCandidates(graphQLData.boardOfDirectors.candidates || [])
-    }
     if (graphQLRequestError) {
       handleAppError(graphQLRequestError)
     }
-  }, [graphQLData, graphQLRequestError])
+  }, [graphQLRequestError])
 
   if (loading) {
     return <LoadingSpinner />
diff --git a/frontend/src/app/global-error.tsx b/frontend/src/app/global-error.tsx
index f3213ea415..9532023d39 100644
--- a/frontend/src/app/global-error.tsx
+++ b/frontend/src/app/global-error.tsx
@@ -102,12 +102,18 @@ export const SentryErrorFallback: React.FC<{
   error: unknown
   errorConfig?: ErrorDisplayProps
 }> = ({ error, errorConfig = ERROR_CONFIGS['500'] }) => {
-  Sentry.captureException(error instanceof Error ? error : new Error(String(error)))
+  React.useEffect(() => {
+    Sentry.captureException(error instanceof Error ? error : new Error(String(error)))
+  }, [error])
+
   return <ErrorDisplay {...errorConfig} />
 }
 
 export default function GlobalError({ error }: Readonly<{ error: Error }>) {
-  Sentry.captureException(error)
+  React.useEffect(() => {
+    Sentry.captureException(error)
+  }, [error])
+
   const errorConfig = ERROR_CONFIGS['500']
   return <ErrorDisplay {...errorConfig} />
 }
diff --git a/frontend/src/components/SkeletonsBase.tsx b/frontend/src/components/SkeletonsBase.tsx
index fd30b4aa3a..cc2312248d 100644
--- a/frontend/src/components/SkeletonsBase.tsx
+++ b/frontend/src/components/SkeletonsBase.tsx
@@ -1,5 +1,6 @@
 import { Skeleton } from '@heroui/skeleton'
 import React from 'react'
+import type { CardSkeletonProps } from 'types/skeleton'
 import LoadingSpinner from 'components/LoadingSpinner'
 import AboutSkeleton from 'components/skeletons/AboutSkeleton'
 import CardSkeleton from 'components/skeletons/Card'
@@ -8,16 +9,7 @@ import OrganizationDetailsPageSkeleton from 'components/skeletons/OrganizationDe
 import SnapshotSkeleton from 'components/skeletons/SnapshotSkeleton'
 import UserCardSkeleton from 'components/skeletons/UserCard'
 
-type CardSkeletonComponentProps = {
-  showLevel?: boolean
-  showIcons?: boolean
-  showLink?: boolean
-  numIcons?: number
-  showContributors?: boolean
-  showSocial?: boolean
-}
-
-export const CardSkeletonComponent: React.FC<CardSkeletonComponentProps> = (props) => (
+export const CardSkeletonComponent: React.FC<CardSkeletonProps> = (props) => (
   <CardSkeleton {...props} />
 )
 function userCardRender() {
@@ -49,8 +41,8 @@ const SkeletonBase = ({
   indexName: string
   loadingImageUrl: string
 }) => {
-  let Component: React.FC<CardSkeletonComponentProps> = CardSkeletonComponent
-  let componentProps: CardSkeletonComponentProps = {}
+  let Component: React.FC<CardSkeletonProps>
+  let componentProps: CardSkeletonProps = {}
   switch (indexName) {
     case 'chapters':
       Component = CardSkeletonComponent
@@ -90,16 +82,18 @@ const SkeletonBase = ({
     default:
       return <LoadingSpinner imageUrl={loadingImageUrl} />
   }
+  const ResolvedComponent: React.FC<CardSkeletonProps> = Component ?? CardSkeletonComponent
+
   return (
     <div className="flex w-full flex-col items-center justify-center">
       {indexName == 'chapters' ? (
         <Skeleton className="mb-2 h-96 w-full max-w-6xl" />
       ) : (
-        <Component {...componentProps} />
+        <ResolvedComponent {...componentProps} />
       )}
-      <Component {...componentProps} />
-      <Component {...componentProps} />
-      <Component {...componentProps} />
+      <ResolvedComponent {...componentProps} />
+      <ResolvedComponent {...componentProps} />
+      <ResolvedComponent {...componentProps} />
     </div>
   )
 }

From 3d2b51d65116d9b0a80d7195efaf0ae37d097bbd Mon Sep 17 00:00:00 2001
From: Anurag Yadav <anuragyadav2787@gmail.com>
Date: Wed, 11 Feb 2026 22:50:02 +0530
Subject: [PATCH 3/4] update code

---
 frontend/src/app/board/[year]/candidates/page.tsx |  4 ++--
 frontend/src/components/SkeletonsBase.tsx         | 10 ++++------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/board/[year]/candidates/page.tsx b/frontend/src/app/board/[year]/candidates/page.tsx
index f29d0f61ac..f00c0a9190 100644
--- a/frontend/src/app/board/[year]/candidates/page.tsx
+++ b/frontend/src/app/board/[year]/candidates/page.tsx
@@ -472,7 +472,7 @@ const CandidateCard = ({ candidate, year }: CandidateCardProps) => {
             </h4>
             {ledChapters.length === 0 && ledProjects.length === 0 ? (
               <div className="inline-flex items-center gap-1.5 rounded-md bg-orange-50 px-2 py-1 text-xs font-medium text-orange-700 ring-1 ring-orange-700/10 ring-inset dark:bg-orange-900/20 dark:text-orange-400 dark:ring-orange-400/30">
-                No chapters or projects are lead by this candidate
+                No chapters or projects are led by this candidate
               </div>
             ) : (
               <div className="flex flex-wrap gap-2">
@@ -586,7 +586,7 @@ const CandidateCard = ({ candidate, year }: CandidateCardProps) => {
                     <div>
                       <div className="flex flex-wrap gap-2">
                         {sortedRepos
-                          .slice(1)
+                          .slice(1, 5)
                           .map(([repoName, count]) => renderRepositoryLink(repoName, count))}
                       </div>
                     </div>
diff --git a/frontend/src/components/SkeletonsBase.tsx b/frontend/src/components/SkeletonsBase.tsx
index cc2312248d..a651be8d8f 100644
--- a/frontend/src/components/SkeletonsBase.tsx
+++ b/frontend/src/components/SkeletonsBase.tsx
@@ -82,18 +82,16 @@ const SkeletonBase = ({
     default:
       return <LoadingSpinner imageUrl={loadingImageUrl} />
   }
-  const ResolvedComponent: React.FC<CardSkeletonProps> = Component ?? CardSkeletonComponent
-
   return (
     <div className="flex w-full flex-col items-center justify-center">
       {indexName == 'chapters' ? (
         <Skeleton className="mb-2 h-96 w-full max-w-6xl" />
       ) : (
-        <ResolvedComponent {...componentProps} />
+        <Component {...componentProps} />
       )}
-      <ResolvedComponent {...componentProps} />
-      <ResolvedComponent {...componentProps} />
-      <ResolvedComponent {...componentProps} />
+      <Component {...componentProps} />
+      <Component {...componentProps} />
+      <Component {...componentProps} />
     </div>
   )
 }

From 70ec4809f4dc082526af586038fa289040717c31 Mon Sep 17 00:00:00 2001
From: Anurag Yadav <anuragyadav2787@gmail.com>
Date: Wed, 11 Feb 2026 23:09:15 +0530
Subject: [PATCH 4/4] fixed coderabbit review

---
 .../src/app/board/[year]/candidates/page.tsx  | 28 ++++++-------------
 frontend/src/components/SkeletonsBase.tsx     | 19 ++++---------
 2 files changed, 14 insertions(+), 33 deletions(-)

diff --git a/frontend/src/app/board/[year]/candidates/page.tsx b/frontend/src/app/board/[year]/candidates/page.tsx
index f00c0a9190..6217c04361 100644
--- a/frontend/src/app/board/[year]/candidates/page.tsx
+++ b/frontend/src/app/board/[year]/candidates/page.tsx
@@ -24,6 +24,12 @@ import LoadingSpinner from 'components/LoadingSpinner'
 
 dayjs.extend(relativeTime)
 
+const sortByName = <T extends { name: string }>(items: T[]): T[] =>
+  [...items].sort((a, b) => a.name.localeCompare(b.name))
+
+const sortByCount = (entries: Array<[string, number]>): Array<[string, number]> =>
+  [...entries].sort(([, a], [, b]) => b - a)
+
 type Candidate = {
   id: string
   memberName: string
@@ -95,20 +101,6 @@ const CandidateCard = ({ candidate, year }: CandidateCardProps) => {
   const [ledChapters, setLedChapters] = useState<Chapter[]>([])
   const [ledProjects, setLedProjects] = useState<Project[]>([])
 
-  const sortByName = <T extends { name: string }>(items: T[]): T[] => {
-    return [...items].sort((a, b) => a.name.localeCompare(b.name))
-  }
-
-  const sortByContributionCount = (entries: Array<[string, number]>): Array<[string, number]> => {
-    return [...entries].sort(([, a], [, b]) => b - a)
-  }
-
-  const sortChannelsByMessageCount = (
-    entries: Array<[string, number]>
-  ): Array<[string, number]> => {
-    return [...entries].sort(([, a], [, b]) => b - a)
-  }
-
   // Render a single channel link item
   const renderChannelLink = (channelName: string, messageCount: string | number) => (
     <a
@@ -165,9 +157,7 @@ const CandidateCard = ({ candidate, year }: CandidateCardProps) => {
       )
     }
 
-    const sortedChannels = sortChannelsByMessageCount(
-      Object.entries(snapshot.channelCommunications)
-    )
+    const sortedChannels = sortByCount(Object.entries(snapshot.channelCommunications))
 
     if (sortedChannels.length === 0) return null
 
@@ -557,9 +547,7 @@ const CandidateCard = ({ candidate, year }: CandidateCardProps) => {
           {snapshot.repositoryContributions &&
             Object.keys(snapshot.repositoryContributions).length > 0 &&
             (() => {
-              const sortedRepos = sortByContributionCount(
-                Object.entries(snapshot.repositoryContributions)
-              )
+              const sortedRepos = sortByCount(Object.entries(snapshot.repositoryContributions))
               const topRepo = sortedRepos[0]
               const [topRepoName, topRepoCount] = topRepo
 
diff --git a/frontend/src/components/SkeletonsBase.tsx b/frontend/src/components/SkeletonsBase.tsx
index a651be8d8f..1519b5943f 100644
--- a/frontend/src/components/SkeletonsBase.tsx
+++ b/frontend/src/components/SkeletonsBase.tsx
@@ -1,5 +1,4 @@
 import { Skeleton } from '@heroui/skeleton'
-import React from 'react'
 import type { CardSkeletonProps } from 'types/skeleton'
 import LoadingSpinner from 'components/LoadingSpinner'
 import AboutSkeleton from 'components/skeletons/AboutSkeleton'
@@ -9,9 +8,7 @@ import OrganizationDetailsPageSkeleton from 'components/skeletons/OrganizationDe
 import SnapshotSkeleton from 'components/skeletons/SnapshotSkeleton'
 import UserCardSkeleton from 'components/skeletons/UserCard'
 
-export const CardSkeletonComponent: React.FC<CardSkeletonProps> = (props) => (
-  <CardSkeleton {...props} />
-)
+// Use CardSkeleton directly; wrapper removed
 function userCardRender() {
   const cardCount = 12
   return (
@@ -41,15 +38,13 @@ const SkeletonBase = ({
   indexName: string
   loadingImageUrl: string
 }) => {
-  let Component: React.FC<CardSkeletonProps>
   let componentProps: CardSkeletonProps = {}
+
   switch (indexName) {
     case 'chapters':
-      Component = CardSkeletonComponent
       componentProps = { showLevel: false, showIcons: false, showLink: false }
       break
     case 'issues':
-      Component = CardSkeletonComponent
       componentProps = {
         showLevel: false,
         showIcons: true,
@@ -59,11 +54,9 @@ const SkeletonBase = ({
       }
       break
     case 'projects':
-      Component = CardSkeletonComponent
       componentProps = { showLink: false, showSocial: false, showIcons: true, numIcons: 3 }
       break
     case 'committees':
-      Component = CardSkeletonComponent
       componentProps = { showLink: false, showLevel: false, showIcons: true, numIcons: 1 }
       break
     case 'users':
@@ -87,11 +80,11 @@ const SkeletonBase = ({
       {indexName == 'chapters' ? (
         <Skeleton className="mb-2 h-96 w-full max-w-6xl" />
       ) : (
-        <Component {...componentProps} />
+        <CardSkeleton {...componentProps} />
       )}
-      <Component {...componentProps} />
-      <Component {...componentProps} />
-      <Component {...componentProps} />
+      <CardSkeleton {...componentProps} />
+      <CardSkeleton {...componentProps} />
+      <CardSkeleton {...componentProps} />
     </div>
   )
 }