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) && }