Apps/roadmap/debounce

apps/roadmap/package.json

@@ -24,5 +24,5 @@
     "typecheck": "tsgo --noEmit"
   },
   "type": "module",
-  "version": "1.0.3"
-}
+  "version": "1.0.4"
+}

apps/roadmap/src/App.tsx

@@ -14,11 +14,12 @@ import "./App.css";
 const App: FC = () => {
   const [overlayOpen, setOverlayOpen] = useState(false);
   const [selectedEntry, setSelectedEntry] = useState<PendoAPIFeature | null>(
-    undefined,
+    null,
   );
   const [brandConfig, setBrandConfig] = useState<unknown>({});
-  const [roadmap, setRoadmap] = useState<RoadmapFeatures | null>(undefined);
+  const [roadmap, setRoadmap] = useState<RoadmapFeatures | null>(null);
   const [isDark, setIsDark] = useState(false);
+  const [showLoading, setShowLoading] = useState(false);
 
   useEffect(() => {
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
@@ -72,14 +73,11 @@ const App: FC = () => {
     }));
   }, [roadmap]);
 
-  // Debounce loading state
-  const [showLoading, setShowLoading] = useState(false);
   useEffect(() => {
     if (!roadmap) {
+      setShowLoading(false); 
       const timeout = setTimeout(() => setShowLoading(true), 1000);
       return () => clearTimeout(timeout);
-    } else {
-      setShowLoading(false);
     }
   }, [roadmap]);
 

apps/roadmap/src/utils/getRoadmap.ts

@@ -1,7 +1,7 @@
 import paramsToPendo from "./paramsToPendo";
 
-let roadmapPromise: Promise<RoadmapFeatures | null> | null;
-let cachedRoadmap: RoadmapFeatures | null;
+let roadmapPromise: Promise<RoadmapFeatures | null> | null = null;
+let cachedRoadmap: RoadmapFeatures | null = null;
 
 type RoadmapRequestEvent = MessageEvent<{ value?: string }>;
 
@@ -11,7 +11,7 @@ const getRoadmap = (): Promise<RoadmapFeatures | null> => {
     console.debug("Returning cached roadmap");
     return Promise.resolve(cachedRoadmap);
   }
-  if (roadmapPromise) {
+  if (roadmapPromise !== null) {
     console.debug("Returning existing roadmap promise");
     console.log(roadmapPromise);
     return roadmapPromise;
@@ -29,10 +29,9 @@ const getRoadmap = (): Promise<RoadmapFeatures | null> => {
         window.removeEventListener("message", handler);
         const result = paramsToPendo(event.data.value);
         cachedRoadmap = result;
-        roadmapPromise = undefined;
+        roadmapPromise = null;
         resolve(result);
       }
-      // Ignore unrelated events
     };
     window.addEventListener("message", handler);
   });