diff --git a/.github/workflows/cypress-explorer-e2e.yml b/.github/workflows/cypress-explorer-e2e.yml index f1c5081c3..43633f7a0 100644 --- a/.github/workflows/cypress-explorer-e2e.yml +++ b/.github/workflows/cypress-explorer-e2e.yml @@ -98,7 +98,7 @@ jobs: while read -r file; do mv "${file}" "$(echo ${file} | sed 's|:|-|g')" done< <(find /home/runner/.vegacapsule/testnet/logs -type f) - + - uses: actions/upload-artifact@v2 if: ${{ always() }} with: diff --git a/apps/trading/components/app-loader/index.tsx b/apps/trading/components/app-loader/index.tsx index 17844f4ad..ac41da35a 100644 --- a/apps/trading/components/app-loader/index.tsx +++ b/apps/trading/components/app-loader/index.tsx @@ -8,8 +8,7 @@ import { Web3Provider as Web3ProviderInternal, useWeb3ConnectStore, } from '@vegaprotocol/web3'; -import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit'; -import { t } from '@vegaprotocol/react-helpers'; +import { AsyncRenderer, Loader } from '@vegaprotocol/ui-toolkit'; interface AppLoaderProps { children: ReactNode; @@ -21,10 +20,7 @@ interface AppLoaderProps { */ export function AppLoader({ children }: AppLoaderProps) { return ( - {t('Loading...')}} - cache={cacheConfig} - > + } cache={cacheConfig}> {children} ); diff --git a/apps/trading/components/preloader/preloader.tsx b/apps/trading/components/preloader/preloader.tsx new file mode 100644 index 000000000..7ae503363 --- /dev/null +++ b/apps/trading/components/preloader/preloader.tsx @@ -0,0 +1,22 @@ +import { Loader } from '@vegaprotocol/ui-toolkit'; + +export const Preloader = () => { + return ( + <> + +
+ +
+ + ); +}; + +export default Preloader; diff --git a/apps/trading/pages/_app.page.tsx b/apps/trading/pages/_app.page.tsx index 82ea48e2c..59206bf2e 100644 --- a/apps/trading/pages/_app.page.tsx +++ b/apps/trading/pages/_app.page.tsx @@ -1,4 +1,5 @@ import Head from 'next/head'; +import dynamic from 'next/dynamic'; import type { AppProps } from 'next/app'; import { Navbar } from '../components/navbar'; import { t } from '@vegaprotocol/react-helpers'; @@ -22,6 +23,7 @@ import { } from '@vegaprotocol/environment'; import { AppLoader, Web3Provider } from '../components/app-loader'; import './styles.css'; +import './gen-styles.scss'; import { usePageTitleStore } from '../stores'; import { Footer } from '../components/footer'; import { useEffect, useMemo, useState } from 'react'; @@ -67,7 +69,7 @@ function AppBody({ Component }: AppProps) { const { VEGA_ENV } = useEnvironment(); return ( - <> +
{/* Cannot use meta tags in _document.page.tsx see https://nextjs.org/docs/messages/no-document-viewport-meta */} @@ -76,7 +78,7 @@ function AppBody({ Component }: AppProps) { -
+
@@ -92,10 +94,17 @@ function AppBody({ Component }: AppProps) { - +
); } +const DynamicLoader = dynamic( + () => import('../components/preloader/preloader'), + { + loading: () => <>Loading..., + } +); + function VegaTradingApp(props: AppProps) { const [mounted, setMounted] = useState(false); @@ -106,7 +115,9 @@ function VegaTradingApp(props: AppProps) { setMounted(true); }, []); - if (!mounted) return null; + if (!mounted) { + return ; + } return ( diff --git a/apps/trading/pages/gen-styles.scss b/apps/trading/pages/gen-styles.scss new file mode 100644 index 000000000..6737f9167 --- /dev/null +++ b/apps/trading/pages/gen-styles.scss @@ -0,0 +1,50 @@ +.pre-loader { + display: flex; + width: 100%; + min-height: 100vh; + justify-content: center; + align-items: center; + + @for $i from 0 through 16 { + .loader-item:nth-child(#{$i}) { + @if $i % 2 == 0 { + animation-delay: #{$i * 50 * random(5)}ms; + animation-direction: reverse; + } @else { + animation-delay: #{$i * -50 * random(5)}ms; + animation-direction: alternate; + } + } + } + .pre-loader-center { + align-items: center; + display: flex; + flex-direction: column; + } + .pre-loader-wrapper { + width: 50px; + height: 50px; + display: flex; + flex-wrap: wrap; + } + .loader-item { + width: 10px; + height: 10px; + background: black; + animation: flickering 0.4s steps(2, jump-none) alternate infinite; + } +} +@keyframes flickering { + 0% { + opacity: 1; + } + 25% { + opacity: 1; + } + 26% { + opacity: 0; + } + 100% { + opacity: 0; + } +} diff --git a/libs/ui-toolkit/src/components/loader/loader.tsx b/libs/ui-toolkit/src/components/loader/loader.tsx index 91e456a65..48208a2e7 100644 --- a/libs/ui-toolkit/src/components/loader/loader.tsx +++ b/libs/ui-toolkit/src/components/loader/loader.tsx @@ -4,20 +4,27 @@ import { useEffect, useState } from 'react'; export interface LoaderProps { size?: 'small' | 'large'; forceTheme?: 'dark' | 'light'; + preloader?: boolean; } -export const Loader = ({ size = 'large', forceTheme }: LoaderProps) => { +export const Loader = ({ + size = 'large', + forceTheme, + preloader, +}: LoaderProps) => { const [, forceRender] = useState(false); useEffect(() => { - const interval = setInterval(() => { - forceRender((x) => !x); - }, 100); + const interval = preloader + ? undefined + : setInterval(() => { + forceRender((x) => !x); + }, 100); return () => clearInterval(interval); - }, []); + }, [preloader]); - const itemClasses = classNames({ + const itemClasses = classNames('loader-item', { 'dark:bg-white bg-black': !forceTheme, 'bg-white': forceTheme === 'dark', 'bg-black': forceTheme === 'light', @@ -29,8 +36,11 @@ export const Loader = ({ size = 'large', forceTheme }: LoaderProps) => { const items = size === 'small' ? 9 : 16; return ( -
-
+
+
{new Array(items).fill(null).map((_, i) => { return (