feat(visualizator-be): Add loading screen & other loaders

paraspell · Aug 22, 2024 · db8e088 · db8e088
1 parent ce80e4b
commit db8e088
Show file tree

Hide file tree

Showing 19 changed files with 742 additions and 50 deletions.
diff --git a/apps/visualizator-fe/index.html b/apps/visualizator-fe/index.html
@@ -4,7 +4,13 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Polkadot visualization</title>
+    <title>XCM Visualizator</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Anek+Devanagari:[email protected]&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/apps/visualizator-fe/package.json b/apps/visualizator-fe/package.json
@@ -42,6 +42,7 @@
     "i18next-browser-languagedetector": "^8.0.0",
     "idb": "^8.0.0",
     "react": "^18.3.1",
+    "react-apollo-network-status": "^5.2.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.0.0",
     "three": "^0.167.0",

diff --git a/apps/visualizator-fe/src/App.tsx b/apps/visualizator-fe/src/App.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Flex, Group, MantineProvider, Stack } from '@mantine/core';
+import { Box, Flex, Group, MantineProvider, Stack } from '@mantine/core';
 import Scene3d from './pages/Scene3d';
 import SelectedParachainProvider from './context/SelectedParachain/SelectedParachainContext';
 import Footer from './components/Footer/Footer';
@@ -8,12 +8,25 @@ import ChannelInfoContainer from './components/ChannelInfo/ChannelInfo.container
 import SendXCMContainer from './components/SendXCMContainer/SendXCMContainer';
 import WalletProvider from './providers/WalletProvider';
 import { ApolloProvider } from '@apollo/client';
-import { client } from './apolloClient';
 import { useSpring, animated } from '@react-spring/web';
 import CollapseButton from './components/CollapseButton';
 import EcosystemSelectContainer from './components/EcosystemSelect/EcosystemSelect.container';
 import { PageRoute } from './PageRoute';
 import { Notifications } from '@mantine/notifications';
+import LoadingScreen from './components/LoadingScreen/LoadingScreen';
+import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client';
+import { createNetworkStatusNotifier } from 'react-apollo-network-status';
+
+const { link, useApolloNetworkStatus } = createNetworkStatusNotifier();
+
+export const client = new ApolloClient({
+  cache: new InMemoryCache(),
+  link: link.concat(
+    createHttpLink({
+      uri: import.meta.env.VITE_API_URL as string
+    })
+  )
+});
 
 const App = () => {
   const [width, setWidth] = useState('40%');
@@ -30,27 +43,30 @@ const App = () => {
       <WalletProvider>
         <SelectedParachainProvider>
           <MantineProvider>
-            <Notifications />
-            <Flex h="100%">
-              <Group flex={1} w="60%" h="100%" pos="relative">
-                <Scene3d />
-                <Footer />
-                <ChannelInfoContainer />
-                <SendXCMContainer />
-                <EcosystemSelectContainer />
-              </Group>
-              <animated.div style={props}>
-                <Stack h="100%" w="100%" pos="relative" bg="white">
-                  <CollapseButton onClick={toggleWidth} isCollapsed={isCollapsed} />
-                  <Flex flex={1} w="100%" justify="center">
-                    <TabNavigator defaultValue={PageRoute.SCENE_2D_ASSETS_CHART} />
-                  </Flex>
-                  <Flex flex={1} w="100%" justify="center">
-                    <TabNavigator />
-                  </Flex>
-                </Stack>
-              </animated.div>
-            </Flex>
+            <Box pos="relative" h="100%">
+              <LoadingScreen useApolloNetworkStatus={useApolloNetworkStatus} />
+              <Notifications />
+              <Flex h="100%">
+                <Group flex={1} w="60%" h="100%" pos="relative">
+                  <Scene3d />
+                  <Footer />
+                  <ChannelInfoContainer />
+                  <SendXCMContainer />
+                  <EcosystemSelectContainer />
+                </Group>
+                <animated.div style={props}>
+                  <Stack h="100%" w="100%" pos="relative" bg="white">
+                    <CollapseButton onClick={toggleWidth} isCollapsed={isCollapsed} />
+                    <Flex flex={1} w="100%" justify="center">
+                      <TabNavigator defaultValue={PageRoute.SCENE_2D_ASSETS_CHART} />
+                    </Flex>
+                    <Flex flex={1} w="100%" justify="center">
+                      <TabNavigator />
+                    </Flex>
+                  </Stack>
+                </animated.div>
+              </Flex>
+            </Box>
           </MantineProvider>
         </SelectedParachainProvider>
       </WalletProvider>

diff --git a/apps/visualizator-fe/src/apolloClient.ts b/apps/visualizator-fe/src/apolloClient.ts
diff --git a/apps/visualizator-fe/src/assets/logo.png b/apps/visualizator-fe/src/assets/logo.png
diff --git a/apps/visualizator-fe/src/components/AccountsAmountPlot/AccountsAmountPlot.container.tsx b/apps/visualizator-fe/src/components/AccountsAmountPlot/AccountsAmountPlot.container.tsx
@@ -6,6 +6,7 @@ import { getParachainId } from '../../utils/utils';
 import { useQuery } from '@apollo/client';
 import { useTranslation } from 'react-i18next';
 import { Ecosystem } from '../../types/types';
+import { Center, Loader } from '@mantine/core';
 
 const now = Date.now();
 
@@ -19,7 +20,7 @@ const AccountsAmountPlotContainer: FC<Props> = ({ threshold }) => {
 
   const [start, end] = dateRange;
 
-  const { data, error } = useQuery(accountXcmCountsQueryDocument, {
+  const { data, loading, error } = useQuery(accountXcmCountsQueryDocument, {
     variables: {
       threshold,
       paraIds: parachains.map(parachain => getParachainId(parachain, Ecosystem.POLKADOT)),
@@ -28,6 +29,14 @@ const AccountsAmountPlotContainer: FC<Props> = ({ threshold }) => {
     }
   });
 
+  if (loading) {
+    return (
+      <Center h="100%" w="100%">
+        <Loader size="xs" />
+      </Center>
+    );
+  }
+
   if (error) {
     return <div>{t('error')}</div>;
   }

diff --git a/apps/visualizator-fe/src/components/AmountTransferedPlot/AmountTransferedPlot.container.tsx b/apps/visualizator-fe/src/components/AmountTransferedPlot/AmountTransferedPlot.container.tsx
@@ -6,6 +6,7 @@ import { FC } from 'react';
 import { useQuery } from '@apollo/client';
 import { useTranslation } from 'react-i18next';
 import { Ecosystem } from '../../types/types';
+import { Center, Loader } from '@mantine/core';
 
 const now = Date.now();
 
@@ -18,14 +19,22 @@ const AmountTransferedPlotContainer: FC<Props> = ({ showMedian }) => {
   const { parachains, dateRange } = useSelectedParachain();
   const [start, end] = dateRange;
 
-  const { data, error } = useQuery(messageCountsByDayQueryDocument, {
+  const { data, loading, error } = useQuery(messageCountsByDayQueryDocument, {
     variables: {
       paraIds: parachains.map(parachain => getParachainId(parachain, Ecosystem.POLKADOT)),
       startTime: start && end ? start.getTime() / 1000 : 1,
       endTime: start && end ? end.getTime() / 1000 : now
     }
   });
 
+  if (loading) {
+    return (
+      <Center h="100%">
+        <Loader size="xs" />
+      </Center>
+    );
+  }
+
   if (error) {
     return <div>{t('error')}</div>;
   }

diff --git a/apps/visualizator-fe/src/components/AssetsTransferedPlot/AssetsTransferedPlot.container.tsx b/apps/visualizator-fe/src/components/AssetsTransferedPlot/AssetsTransferedPlot.container.tsx
@@ -5,6 +5,7 @@ import { useSelectedParachain } from '../../context/SelectedParachain/useSelecte
 import { useQuery } from '@apollo/client';
 import { useTranslation } from 'react-i18next';
 import { Ecosystem } from '../../types/types';
+import { Center, Loader } from '@mantine/core';
 
 const now = Date.now();
 
@@ -14,14 +15,22 @@ const AssetsTransferedPlotContainer = () => {
 
   const [start, end] = dateRange;
 
-  const { data, error } = useQuery(assetCountsBySymbolQueryDocument, {
+  const { data, loading, error } = useQuery(assetCountsBySymbolQueryDocument, {
     variables: {
       paraIds: parachains.map(parachain => getParachainId(parachain, Ecosystem.POLKADOT)),
       startTime: start && end ? start.getTime() / 1000 : 1,
       endTime: start && end ? end.getTime() / 1000 : now
     }
   });
 
+  if (loading) {
+    return (
+      <Center h="100%">
+        <Loader size="xs" />
+      </Center>
+    );
+  }
+
   if (error) {
     return <div>{t('error')}</div>;
   }

diff --git a/apps/visualizator-fe/src/components/ChannelInfo/ChannelInfo.container.tsx b/apps/visualizator-fe/src/components/ChannelInfo/ChannelInfo.container.tsx
@@ -9,7 +9,7 @@ const ChannelInfoContainer = () => {
   const { t } = useTranslation();
   const { channelId, channelAlertOpen, setChannelAlertOpen } = useSelectedParachain();
 
-  const { data, error } = useQuery(channelQueryDocument, {
+  const { data, loading, error } = useQuery(channelQueryDocument, {
     variables: {
       id: channelId ?? 1
     }
@@ -32,7 +32,7 @@ const ChannelInfoContainer = () => {
   }
 
   return channelId && channelAlertOpen ? (
-    <ChannelInfo channel={data?.channel} onClose={onClose} />
+    <ChannelInfo loading={loading} channel={data?.channel} onClose={onClose} />
   ) : null;
 };
 

diff --git a/apps/visualizator-fe/src/components/ChannelInfo/ChannelInfo.tsx b/apps/visualizator-fe/src/components/ChannelInfo/ChannelInfo.tsx
@@ -1,15 +1,16 @@
-import { Alert, Box, Group, Stack, Text } from '@mantine/core';
+import { Alert, Box, Center, Group, Loader, Stack, Text } from '@mantine/core';
 import { useSelectedParachain } from '../../context/SelectedParachain/useSelectedParachain';
 import { ChannelsQuery } from '../../gql/graphql';
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
 type Props = {
+  loading?: boolean;
   channel?: ChannelsQuery['channels'][number];
   onClose?: () => void;
 };
 
-const ChannelInfo: FC<Props> = ({ channel, onClose }) => {
+const ChannelInfo: FC<Props> = ({ loading, channel, onClose }) => {
   const { t } = useTranslation();
   const { channelId } = useSelectedParachain();
   return (
@@ -25,6 +26,11 @@ const ChannelInfo: FC<Props> = ({ channel, onClose }) => {
         radius="md"
         bg="rgba(255,255,255,0.8)"
       >
+        {loading && (
+          <Center h="100%">
+            <Loader size="xs" />
+          </Center>
+        )}
         <Stack>
           <Group align="center" gap="xs">
             <Text size="lg">{t('selectedChannelId')}:</Text>

diff --git a/apps/visualizator-fe/src/components/CssLoader/CssLoader.module.css b/apps/visualizator-fe/src/components/CssLoader/CssLoader.module.css
@@ -0,0 +1,56 @@
+.loader {
+  font-size: 28px;
+  color: #dbfafd;
+  width: 1em;
+  height: 1em;
+  box-sizing: border-box;
+  background-color: currentcolor;
+  position: relative;
+  border-radius: 50%;
+  transform: rotateX(-60deg) perspective(1000px);
+}
+.loader:before,
+.loader:after {
+  content: '';
+  display: block;
+  position: absolute;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  width: inherit;
+  height: inherit;
+  border-radius: inherit;
+  animation: flowerFlow 1s ease-out infinite;
+}
+.loader:after {
+  animation-delay: 0.4s;
+}
+
+@keyframes flowerFlow {
+  0% {
+    opacity: 1;
+    transform: rotate(0deg);
+    box-shadow:
+      0 0 0 -0.5em currentcolor,
+      0 0 0 -0.5em currentcolor,
+      0 0 0 -0.5em currentcolor,
+      0 0 0 -0.5em currentcolor,
+      0 0 0 -0.5em currentcolor,
+      0 0 0 -0.5em currentcolor,
+      0 0 0 -0.5em currentcolor,
+      0 0 0 -0.5em currentcolor;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(180deg);
+    box-shadow:
+      -1em -1em 0 -0.35em currentcolor,
+      0 -1.5em 0 -0.35em currentcolor,
+      1em -1em 0 -0.35em currentcolor,
+      -1.5em 0 0 -0.35em currentcolor,
+      1.5em -0 0 -0.35em currentcolor,
+      -1em 1em 0 -0.35em currentcolor,
+      0 1.5em 0 -0.35em currentcolor,
+      1em 1em 0 -0.35em currentcolor;
+  }
+}
diff --git a/apps/visualizator-fe/src/components/CssLoader/CssLoader.tsx b/apps/visualizator-fe/src/components/CssLoader/CssLoader.tsx
@@ -0,0 +1,4 @@
+import { Box } from '@mantine/core';
+import classes from './CssLoader.module.css';
+
+export const CssLoader = () => <Box className={classes.loader} component="span" />;
diff --git a/apps/visualizator-fe/src/components/LoadingScreen/LoadingScreen.tsx b/apps/visualizator-fe/src/components/LoadingScreen/LoadingScreen.tsx
@@ -0,0 +1,60 @@
+import { LoadingOverlay } from '@mantine/core';
+import StarsBackground from '../StarsBackground/StarsBackground';
+import LogoLoader from '../LogoLoader/LogoLoader';
+import { FC, useEffect, useState } from 'react';
+import {
+  NetworkStatus,
+  UseApolloNetworkStatusOptions
+} from 'react-apollo-network-status/dist/src/useApolloNetworkStatus';
+
+type Props = {
+  useApolloNetworkStatus: (options?: UseApolloNetworkStatusOptions | undefined) => NetworkStatus;
+};
+
+const LoadingScreen: FC<Props> = ({ useApolloNetworkStatus }) => {
+  const status = useApolloNetworkStatus();
+  const [initialLoad, setInitialLoad] = useState(true);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+    if (initialLoad) {
+      timeout = setTimeout(() => {
+        if (status.numPendingQueries === 0) {
+          setLoading(false);
+          setInitialLoad(false);
+        } else {
+          const interval = setInterval(() => {
+            if (status.numPendingQueries === 0) {
+              setLoading(false);
+              setInitialLoad(false);
+              clearInterval(interval);
+            }
+          }, 500);
+        }
+      }, 1000);
+
+      return () => {
+        clearTimeout(timeout);
+        clearInterval(timeout);
+      };
+    }
+  }, [initialLoad, status.numPendingQueries]);
+
+  return (
+    <LoadingOverlay
+      visible={loading}
+      zIndex={1000}
+      overlayProps={{
+        backgroundOpacity: 1,
+        color: '#000',
+        children: <StarsBackground />
+      }}
+      loaderProps={{
+        children: <LogoLoader />
+      }}
+    />
+  );
+};
+
+export default LoadingScreen;
diff --git a/apps/visualizator-fe/src/components/LogoLoader/LogoLoader.module.css b/apps/visualizator-fe/src/components/LogoLoader/LogoLoader.module.css
@@ -0,0 +1,14 @@
+.logoTitle {
+  font-family: 'Anek Devanagari', sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 600;
+  letter-spacing: 5px;
+  font-style: normal;
+  font-variation-settings: 'wdth' 100;
+  color: #dbfafd;
+  font-size: 24px;
+}
+
+.xcmText {
+  margin-bottom: -6px;
+}