evo/EvoCalculator.Client2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

apps/web: add loading spinner between pages

Browse Source
This commit is contained in:
vchikalkin 2024-04-11 10:42:12 +03:00
parent c616b981f1
commit 21b009c833
5 changed files with 53 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/web/Components/Common/Loading.jsx Normal file
View File

@ -0,0 +1,14 @@
import getColors from '@/styles/colors';
import { Result } from 'ui/elements';
import { LoadingOutlined } from 'ui/elements/icons';
const colors = getColors();
export function Loading() {
return (
<Result
icon={<LoadingOutlined style={{ color: colors.COLOR_PRIMARY }} />}
title="Загрузка..."
/>
);
}

3
apps/web/Components/Common/index.ts Normal file
View File

@ -0,0 +1,3 @@
export * from './Error';
export * from './Loading';
export * from './Notification';

1
apps/web/hooks/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './loading';

30
apps/web/hooks/loading.ts Normal file
View File

@ -0,0 +1,30 @@
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
export function usePageLoading() {
const [loading, setLoading] = useState(false);
const router = useRouter();
function handleStart() {
return setLoading(true);
}
function handleComplete() {
return setLoading(false);
}
useEffect(() => {
router.events.on('routeChangeStart', handleStart);
router.events.on('routeChangeComplete', handleComplete);
router.events.on('routeChangeError', handleComplete);
return () => {
router.events.off('routeChangeStart', handleStart);
router.events.off('routeChangeComplete', handleComplete);
router.events.off('routeChangeError', handleComplete);
};
}, []);
return {
loading,
};
}

7
apps/web/pages/_app.jsx
View File

@ -4,9 +4,10 @@ import '../styles/globals.css';
import '../styles/antd-fix.css'; import '../styles/antd-fix.css';
import initializeQueryClient from '@/api/client'; import initializeQueryClient from '@/api/client';
import initializeApollo from '@/apollo/client'; import initializeApollo from '@/apollo/client';
import { Notification } from '@/Components/Common/Notification'; import { Loading, Notification } from '@/Components/Common';
import Layout from '@/Components/Layout'; import Layout from '@/Components/Layout';
import { theme } from '@/config/ui'; import { theme } from '@/config/ui';
import { usePageLoading } from '@/hooks';
import StoreProvider from '@/stores/Provider'; import StoreProvider from '@/stores/Provider';
import getColors from '@/styles/colors'; import getColors from '@/styles/colors';
import { GlobalStyle } from '@/styles/global-style'; import { GlobalStyle } from '@/styles/global-style';
@ -29,6 +30,8 @@ function App({ Component, pageProps }) {
const apolloClient = useMemo(() => initializeApollo(initialApolloState), [initialApolloState]); const apolloClient = useMemo(() => initializeApollo(initialApolloState), [initialApolloState]);
const queryClient = useMemo(() => initializeQueryClient(initialQueryState), [initialQueryState]); const queryClient = useMemo(() => initializeQueryClient(initialQueryState), [initialQueryState]);
const { loading } = usePageLoading();
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<Head> <Head>
@ -53,7 +56,7 @@ function App({ Component, pageProps }) {
> >
<Notification> <Notification>
<Layout {...pageProps}> <Layout {...pageProps}>
<Component {...pageProps} /> {loading ? <Loading /> : <Component {...pageProps} />}
</Layout> </Layout>
</Notification> </Notification>
</AntdConfig> </AntdConfig>