Add Empty Roadmap state

src/components/CustomRoadmap/EmptyRoadmap.tsx

@@ -1,16 +1,18 @@
-import {CircleSlash, PenSquare, Shapes} from 'lucide-react';
+import { CircleSlash, PenSquare, Shapes } from 'lucide-react';
+import { cn } from '../../lib/classname';
 
 type EmptyRoadmapProps = {
   roadmapId: string;
   canManage: boolean;
+  className?: string;
 };
 
 export function EmptyRoadmap(props: EmptyRoadmapProps) {
-  const { roadmapId, canManage } = props;
+  const { roadmapId, canManage, className } = props;
   const editUrl = `${import.meta.env.PUBLIC_EDITOR_APP_URL}/${roadmapId}`;
 
   return (
-    <div className="flex h-full items-center justify-center">
+    <div className={cn('flex h-full items-center justify-center', className)}>
       <div className="flex flex-col items-center">
         <CircleSlash className="mx-auto h-20 w-20 text-gray-400" />
         <h3 className="mt-2">This roadmap is currently empty.</h3>
@@ -18,9 +20,9 @@ export function EmptyRoadmap(props: EmptyRoadmapProps) {
         {canManage && (
           <a
             href={editUrl}
-            className="mt-4 rounded-md bg-gray-500 px-4 py-2 font-medium text-white hover:bg-gray-600 flex items-center"
+            className="mt-4 flex items-center rounded-md bg-gray-500 px-4 py-2 font-medium text-white hover:bg-gray-600"
           >
-            <Shapes className="inline-block mr-2 h-4 w-4" />
+            <Shapes className="mr-2 inline-block h-4 w-4" />
             Edit Roadmap
           </a>
         )}

src/components/CustomRoadmap/FlowRoadmapRenderer.tsx

@@ -10,13 +10,15 @@ import {
 import { pageProgressMessage } from '../../stores/page';
 import { useToast } from '../../hooks/use-toast';
 import type { Node } from 'reactflow';
-import { useCallback, type MouseEvent, useMemo } from 'react';
+import { useCallback, type MouseEvent, useMemo, useState, useRef } from 'react';
 import {
   INITIAL_DESKTOP_ZOOM,
   INITIAL_MOBILE_ZOOM,
   calculateDimensions,
 } from '../../../editor/utils/roadmap';
 import { isMobile } from '../../../editor/utils/is-mobile';
+import { EmptyRoadmap } from './EmptyRoadmap';
+import { cn } from '../../lib/classname';
 
 type FlowRoadmapRendererProps = {
   roadmap: RoadmapDocument;
@@ -26,6 +28,9 @@ export function FlowRoadmapRenderer(props: FlowRoadmapRendererProps) {
   const { roadmap } = props;
   const roadmapId = String(roadmap._id!);
 
+  const [hideRenderer, setHideRenderer] = useState(false);
+  const editorWrapperRef = useRef<HTMLDivElement>(null);
+
   const initialZoom = useMemo(
     () => (isMobile() ? INITIAL_MOBILE_ZOOM : INITIAL_DESKTOP_ZOOM),
     []
@@ -134,23 +139,44 @@ export function FlowRoadmapRenderer(props: FlowRoadmapRendererProps) {
   }, []);
 
   return (
-    <ReadonlyEditor
-      roadmap={roadmap}
-      style={{
-        height: measuredHeight * initialZoom,
-      }}
-      className="min-h-[400px]"
-      onRendered={() => {
-        renderResourceProgress('roadmap', roadmapId).then(() => {});
-      }}
-      onTopicClick={handleTopicClick}
-      onTopicRightClick={handleTopicRightClick}
-      onTopicShiftClick={handleTopicShiftClick}
-      onTopicAltClick={handleTopicAltClick}
-      onButtonNodeClick={handleLinkClick}
-      onLinkClick={handleLinkClick}
-      fontFamily="Balsamiq Sans"
-      fontURL="/fonts/balsamiq.woff2"
-    />
+    <>
+      {hideRenderer && (
+        <EmptyRoadmap
+          roadmapId={roadmapId}
+          canManage={roadmap.canManage}
+          className="grow"
+        />
+      )}
+      <ReadonlyEditor
+        ref={editorWrapperRef}
+        roadmap={roadmap}
+        style={{
+          height: measuredHeight * initialZoom,
+        }}
+        className={cn(
+          roadmap?.nodes?.length === 0
+            ? 'grow'
+            : isMobile()
+            ? 'min-h-0'
+            : 'min-h-[1000px]'
+        )}
+        onRendered={() => {
+          renderResourceProgress('roadmap', roadmapId).then(() => {
+            if (roadmap?.nodes?.length === 0) {
+              setHideRenderer(true);
+              editorWrapperRef?.current?.classList.add('hidden');
+            }
+          });
+        }}
+        onTopicClick={handleTopicClick}
+        onTopicRightClick={handleTopicRightClick}
+        onTopicShiftClick={handleTopicShiftClick}
+        onTopicAltClick={handleTopicAltClick}
+        onButtonNodeClick={handleLinkClick}
+        onLinkClick={handleLinkClick}
+        fontFamily="Balsamiq Sans"
+        fontURL="/fonts/balsamiq.woff2"
+      />
+    </>
   );
 }