From cb8b7561758af33f88de09861ac2ff56a16a8ca1 Mon Sep 17 00:00:00 2001 From: glebskr Date: Sun, 31 Jul 2022 15:46:55 +0300 Subject: [PATCH] WIP Loader --- src/layout/index.tsx | 64 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 63 insertions(+), 1 deletion(-) diff --git a/src/layout/index.tsx b/src/layout/index.tsx index b2a96f0e7..4ecc02c4c 100644 --- a/src/layout/index.tsx +++ b/src/layout/index.tsx @@ -1,7 +1,9 @@ import * as React from 'react' import Head from 'next/head' +import { useRouter } from 'next/router' import styled from 'styled-components' import { transparentize } from 'polished' +import loaderImg from '~/public/defillama-press-kit/nft/PNG/defillama_211230_brand_logo_defillama-nft-icon.png' import ThemeProvider, { GlobalStyle, ThemedBackground } from '~/Theme' import SEO from '~/components/SEO' import Nav from '~/components/Nav' @@ -35,6 +37,44 @@ const PageWrapper = styled.div` } ` +const LoaderBody = styled.div` + margin: 0 auto; + margin-top: 35vh; + width: fit-content; +` + +const LoaderText = styled.div` + margin-top: 8px; + font-size: 20px; + font-weight: 500; + text-align: center; + padding-left: 8px; +` + +const Loader = styled.img` + width: 120px; + height: 120px; + -webkit-animation: spin 3s linear infinite; + -moz-animation: spin 3s linear infinite; + animation: spin 3s linear infinite; + @-moz-keyframes spin { + 100% { + -moz-transform: rotate(360deg); + } + } + @-webkit-keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + } + } + @keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } +` + interface ILayoutProps { title: string children: React.ReactNode @@ -50,6 +90,21 @@ interface IBackground { const Background = styled(ThemedBackground)`` export default function Layout({ title, children, defaultSEO = false, backgroundColor, ...props }: ILayoutProps) { + const router = useRouter() + const [pageLoading, setPageLoading] = React.useState(false) + React.useEffect(() => { + const handleStart = () => { + setPageLoading(true) + } + const handleComplete = () => { + setPageLoading(false) + } + + router.events.on('routeChangeStart', handleStart) + router.events.on('routeChangeComplete', handleComplete) + router.events.on('routeChangeError', handleComplete) + }, [router]) + return ( <> @@ -63,7 +118,14 @@ export default function Layout({ title, children, defaultSEO = false, background