Fix flickering issue

src/components/Roadmaps/RoadmapsPage.tsx

@@ -365,54 +365,58 @@ const groups: GroupType[] = [
   },
 ];
 
+const roleRoadmaps = groups.flatMap((group) =>
+  group.roadmaps.filter((roadmap) => roadmap.type === 'role'),
+);
+const skillRoadmaps = groups.flatMap((group) =>
+  group.roadmaps.filter((roadmap) => roadmap.type === 'skill'),
+);
+
+const allGroups = [
+  {
+    group: 'Role Based Roadmaps',
+    roadmaps: roleRoadmaps,
+  },
+  {
+    group: 'Skill Based Roadmaps',
+    roadmaps: skillRoadmaps,
+  },
+];
+
 export function RoadmapsPage() {
   const [activeGroup, setActiveGroup] = useState<AllowGroupNames>('');
-  const [visibleGroups, setVisibleGroups] = useState<GroupType[]>([]);
+  const [visibleGroups, setVisibleGroups] = useState<GroupType[]>(allGroups);
 
   useEffect(() => {
     if (!activeGroup) {
-      const roleRoadmaps = groups.flatMap((group) =>
+      setVisibleGroups(allGroups);
-        group.roadmaps.filter((roadmap) => roadmap.type === 'role'),
+      return;
-      );
-      const skillRoadmaps = groups.flatMap((group) =>
-        group.roadmaps.filter((roadmap) => roadmap.type === 'skill'),
-      );
-
-      setVisibleGroups([
-        {
-          group: 'Role Based Roadmaps',
-          roadmaps: roleRoadmaps,
-        },
-        {
-          group: 'Skill Based Roadmaps',
-          roadmaps: skillRoadmaps,
-        },
-      ]);
-    } else {
-      const group = groups.find((group) => group.group === activeGroup);
-
-      if (group) {
-        // other groups that have a roadmap that is in the same group
-        const otherGroups = groups.filter((g) => {
-          return (
-            g.group !== group.group &&
-            g.roadmaps.some((roadmap) => {
-              return roadmap.otherGroups?.includes(group.group);
-            })
-          );
-        });
-
-        setVisibleGroups([
-          group,
-          ...otherGroups.map((g) => ({
-            ...g,
-            roadmaps: g.roadmaps.filter((roadmap) =>
-              roadmap.otherGroups?.includes(group.group),
-            ),
-          })),
-        ]);
-      }
     }
+
+    const group = groups.find((group) => group.group === activeGroup);
+    if (!group) {
+      return;
+    }
+
+    // other groups that have a roadmap that is in the same group
+    const otherGroups = groups.filter((g) => {
+      return (
+        g.group !== group.group &&
+        g.roadmaps.some((roadmap) => {
+          return roadmap.otherGroups?.includes(group.group);
+        })
+      );
+    });
+
+    setVisibleGroups([
+      group,
+      ...otherGroups.map((g) => ({
+        ...g,
+        roadmaps: g.roadmaps.filter((roadmap) =>
+          roadmap.otherGroups?.includes(group.group),
+        ),
+      })),
+    ]);
   }, [activeGroup]);
 
   return (

src/components/Roadmaps/RoadmapsPageHeader.tsx

@@ -0,0 +1,28 @@
+export function RoadmapsPageHeader() {
+  return (
+    <div className="bg-white py-12">
+      <div className="container">
+        <div className="flex flex-col items-center bg-white">
+          <h1 className="text-5xl font-bold">Developer Roadmaps</h1>
+          <p className="my-3 text-lg">
+            Browse ever-growing list of up-to-date, community driven roadmaps
+          </p>
+          <p className="flex flex-row gap-3">
+            <a
+              className="inline-block rounded-md bg-black px-3.5 py-1.5 text-base text-white"
+              href="#"
+            >
+              Draw your own roadmap
+            </a>
+            <a
+              className="inline-block rounded-md bg-gray-300 px-3.5 py-1.5 text-base text-black"
+              href="#"
+            >
+              Generate Roadmap with AI
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/roadmaps.astro

@@ -1,5 +1,6 @@
 ---
 import { RoadmapsPage } from '../components/Roadmaps/RoadmapsPage';
+import { RoadmapsPageHeader } from '../components/Roadmaps/RoadmapsPageHeader';
 import GridItem from '../components/GridItem.astro';
 import SimplePageHeader from '../components/SimplePageHeader.astro';
 import BaseLayout from '../layouts/BaseLayout.astro';
@@ -11,32 +12,6 @@ import { getRoadmapsByTag } from '../lib/roadmap';
   description={'Step by step guides and paths to learn different tools or technologies'}
   permalink={'/roadmaps'}
 >
-  <div class=''>
+  <RoadmapsPageHeader client:load />
-    <div class='bg-white py-12'>
+  <RoadmapsPage client:load />
-      <div class='container'>
-        <div class='flex flex-col items-center bg-white'>
-          <h1 class='text-5xl font-bold'>Developer Roadmaps</h1>
-          <p class='my-3 text-lg'>
-            Browse ever-growing list of up-to-date, community driven roadmaps
-          </p>
-          <p class='flex flex-row gap-3'>
-            <a
-              class='inline-block rounded-md bg-black px-3.5 py-1.5 text-base text-white'
-              href='#'
-            >
-              Draw your own roadmap
-            </a>
-            <a
-              class='inline-block rounded-md bg-gray-300 px-3.5 py-1.5 text-base text-black'
-              href='#'
-            >
-              Generate Roadmap with AI
-            </a>
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <RoadmapsPage client:load />
-  </div>
 </BaseLayout>