From f8f29d2a1733a4344aaa80b6abf4f1872b423c12 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 29 Mar 2024 19:35:41 +0000
Subject: [PATCH] Fix flickering issue

---
 src/components/Roadmaps/RoadmapsPage.tsx      | 88 ++++++++++---------
 .../Roadmaps/RoadmapsPageHeader.tsx           | 28 ++++++
 src/pages/roadmaps.astro                      | 31 +------
 3 files changed, 77 insertions(+), 70 deletions(-)
 create mode 100644 src/components/Roadmaps/RoadmapsPageHeader.tsx

diff --git a/src/components/Roadmaps/RoadmapsPage.tsx b/src/components/Roadmaps/RoadmapsPage.tsx
index 77513251f..4d21fda08 100644
--- a/src/components/Roadmaps/RoadmapsPage.tsx
+++ b/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) =>
-        group.roadmaps.filter((roadmap) => roadmap.type === 'role'),
-      );
-      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),
-            ),
-          })),
-        ]);
-      }
+      setVisibleGroups(allGroups);
+      return;
     }
+
+    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 (
diff --git a/src/components/Roadmaps/RoadmapsPageHeader.tsx b/src/components/Roadmaps/RoadmapsPageHeader.tsx
new file mode 100644
index 000000000..a3ab04649
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/pages/roadmaps.astro b/src/pages/roadmaps.astro
index c5cd1cdee..7d9df0145 100644
--- a/src/pages/roadmaps.astro
+++ b/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=''>
-    <div class='bg-white py-12'>
-      <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>
+  <RoadmapsPageHeader client:load />
+  <RoadmapsPage client:load />
 </BaseLayout>