diff --git a/components/roadmap/roadmap-error.tsx b/components/roadmap/roadmap-error.tsx new file mode 100644 index 000000000..be26e35f1 --- /dev/null +++ b/components/roadmap/roadmap-error.tsx @@ -0,0 +1,26 @@ +import { RoadmapType } from '../../lib/roadmap'; +import { Container, Heading, Link, Text } from '@chakra-ui/react'; +import siteConfig from '../../content/site.json'; + +type RoadmapProps = { + roadmap: RoadmapType; +}; + +export function RoadmapError(props: RoadmapProps) { + const { roadmap } = props; + + return ( + + Oops! There's an error + Try refreshing or report a bug and use the non-interactive version + + ); +} diff --git a/components/roadmap/roadmap-loader.tsx b/components/roadmap/roadmap-loader.tsx new file mode 100644 index 000000000..e683b49e8 --- /dev/null +++ b/components/roadmap/roadmap-loader.tsx @@ -0,0 +1,20 @@ +import { Container, Spinner } from '@chakra-ui/react'; + +export function RoadmapLoader() { + return ( + + + + ); +} diff --git a/pages/[roadmap]/interactive.tsx b/pages/[roadmap]/interactive.tsx index a28e897b7..d0db6a4e2 100644 --- a/pages/[roadmap]/interactive.tsx +++ b/pages/[roadmap]/interactive.tsx @@ -1,52 +1,33 @@ -import { Box, Container, Flex, Heading, Spinner, Text } from '@chakra-ui/react'; +import { useFetch } from 'use-http'; +import { useEffect, useRef, useState } from 'react'; +import { Box, Container } from '@chakra-ui/react'; import { GlobalHeader } from '../../components/global-header'; import { OpensourceBanner } from '../../components/opensource-banner'; import { UpdatesBanner } from '../../components/updates-banner'; import { Footer } from '../../components/footer'; import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap'; import Helmet from '../../components/helmet'; -import { useEffect, useRef, useState } from 'react'; import { wireframeJSONToSVG } from '../../lib/renderer'; import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header'; import { ContentDrawer } from '../../components/roadmap/content-drawer'; -import { useFetch } from 'use-http'; -import { Simulate } from 'react-dom/test-utils'; -import load = Simulate.load; +import { RoadmapError } from '../../components/roadmap/roadmap-error'; +import { RoadmapLoader } from '../../components/roadmap/roadmap-loader'; type RoadmapProps = { roadmap: RoadmapType; }; -function RoadmapLoader() { - return ( - - - - ); -} - function RoadmapRenderer(props: RoadmapProps) { const { roadmap } = props; - const { loading: isLoading, error, get } = useFetch(); + const { loading: isLoading, error: hasErrorLoading, get } = useFetch(); const roadmapRef = useRef(null); const [isRendering, setIsRendering] = useState(false); const [roadmapJson, setRoadmapJson] = useState(null); const [groupId, setGroupId] = useState(''); - const [hasError, setHasError] = useState(false); + const [hasErrorRendering, setHasErrorRendering] = useState(false); useEffect(() => { get(`/project/${roadmap.id}.json`) @@ -55,7 +36,7 @@ function RoadmapRenderer(props: RoadmapProps) { }) .catch((err) => { console.error(err); - setHasError(true); + setHasErrorRendering(true); }); }, [get, roadmap.id]); @@ -113,16 +94,20 @@ function RoadmapRenderer(props: RoadmapProps) { container.appendChild(svgElement); }) .catch((err) => { - setHasError(true); + setHasErrorRendering(true); }) .finally(() => { setIsRendering(false); }); }, [roadmapJson]); + if (hasErrorLoading || hasErrorRendering) { + return + } + return ( - {(isLoading || isRendering) && } + {(isLoading || isRendering) && }