Add loader screen
This commit is contained in:
@ -1,4 +1,4 @@
|
|||||||
import { Box, Container } from '@chakra-ui/react';
|
import { Box, Container, Flex, Heading, Spinner, Text } from '@chakra-ui/react';
|
||||||
import { GlobalHeader } from '../../components/global-header';
|
import { GlobalHeader } from '../../components/global-header';
|
||||||
import { OpensourceBanner } from '../../components/opensource-banner';
|
import { OpensourceBanner } from '../../components/opensource-banner';
|
||||||
import { UpdatesBanner } from '../../components/updates-banner';
|
import { UpdatesBanner } from '../../components/updates-banner';
|
||||||
@ -10,17 +10,40 @@ import { wireframeJSONToSVG } from '../../lib/renderer';
|
|||||||
import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header';
|
import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header';
|
||||||
import { ContentDrawer } from '../../components/roadmap/content-drawer';
|
import { ContentDrawer } from '../../components/roadmap/content-drawer';
|
||||||
import { useFetch } from 'use-http';
|
import { useFetch } from 'use-http';
|
||||||
|
import { Simulate } from 'react-dom/test-utils';
|
||||||
|
import load = Simulate.load;
|
||||||
|
|
||||||
type RoadmapProps = {
|
type RoadmapProps = {
|
||||||
roadmap: RoadmapType;
|
roadmap: RoadmapType;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function RoadmapLoader() {
|
||||||
|
return (
|
||||||
|
<Container
|
||||||
|
maxW={'container.md'}
|
||||||
|
position="relative"
|
||||||
|
mt="60px"
|
||||||
|
textAlign="center"
|
||||||
|
>
|
||||||
|
<Spinner
|
||||||
|
thickness="7px"
|
||||||
|
speed="0.65s"
|
||||||
|
emptyColor="gray.200"
|
||||||
|
color="gray.500"
|
||||||
|
size="xl"
|
||||||
|
/>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
function RoadmapRenderer(props: RoadmapProps) {
|
function RoadmapRenderer(props: RoadmapProps) {
|
||||||
const { roadmap } = props;
|
const { roadmap } = props;
|
||||||
|
|
||||||
const { loading, error, get } = useFetch();
|
const { loading: isLoading, error, get } = useFetch();
|
||||||
|
|
||||||
const roadmapRef = useRef(null);
|
const roadmapRef = useRef(null);
|
||||||
|
|
||||||
|
const [isRendering, setIsRendering] = useState(false);
|
||||||
const [roadmapJson, setRoadmapJson] = useState(null);
|
const [roadmapJson, setRoadmapJson] = useState(null);
|
||||||
const [groupId, setGroupId] = useState('');
|
const [groupId, setGroupId] = useState('');
|
||||||
const [hasError, setHasError] = useState(false);
|
const [hasError, setHasError] = useState(false);
|
||||||
@ -67,7 +90,7 @@ function RoadmapRenderer(props: RoadmapProps) {
|
|||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener('keydown', keydownListener);
|
window.removeEventListener('keydown', keydownListener);
|
||||||
window.removeEventListener('click', clickListener);
|
window.removeEventListener('click', clickListener);
|
||||||
}
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -75,6 +98,7 @@ function RoadmapRenderer(props: RoadmapProps) {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setIsRendering(true);
|
||||||
wireframeJSONToSVG(roadmapJson)
|
wireframeJSONToSVG(roadmapJson)
|
||||||
.then((svgElement) => {
|
.then((svgElement) => {
|
||||||
const container: HTMLElement = roadmapRef.current!;
|
const container: HTMLElement = roadmapRef.current!;
|
||||||
@ -90,11 +114,15 @@ function RoadmapRenderer(props: RoadmapProps) {
|
|||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
setHasError(true);
|
setHasError(true);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
setIsRendering(false);
|
||||||
});
|
});
|
||||||
}, [roadmapJson]);
|
}, [roadmapJson]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container maxW={'container.lg'} position="relative">
|
<Container maxW={'container.lg'} position="relative">
|
||||||
|
{(isLoading || isRendering) && <RoadmapLoader /> }
|
||||||
<ContentDrawer
|
<ContentDrawer
|
||||||
roadmap={roadmap}
|
roadmap={roadmap}
|
||||||
groupId={groupId}
|
groupId={groupId}
|
||||||
|
Reference in New Issue
Block a user