LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

fix(trading): hydration error due to loader (#5043)

Browse Source
This commit is contained in:
Matthew Russell 2023-10-17 20:05:53 -07:00 committed by GitHub
parent e7c3b5054c
commit 835ee64243
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
apps/trading/pages/ssr-loader.tsx
View File

@ -1,8 +1,8 @@
export const SSRLoader = () => { import { pseudoRandom } from '@vegaprotocol/ui-toolkit';
const randomDelay = () => {
return parseFloat((Math.random() * (4 - 1) + 1).toFixed(2));
};
const generate = pseudoRandom(1);
export const SSRLoader = () => {
return ( return (
<div <div
style={{ style={{
@ -38,10 +38,9 @@ export const SSRLoader = () => {
width: 10, width: 10,
height: 10, height: 10,
animation: 'flickering 0.4s linear alternate infinite', animation: 'flickering 0.4s linear alternate infinite',
animationDelay: `-${randomDelay()}s`, animationDelay: `-${generate()}s`,
animationDirection: i % 2 === 0 ? 'reverse' : 'alternate', animationDirection: i % 2 === 0 ? 'reverse' : 'alternate',
background: 'black', background: 'black',
opacity: Math.random() > 0.5 ? 1 : 0,
}} }}
/> />
); );

7
libs/ui-toolkit/src/components/loader/loader.tsx
View File

@ -1,8 +1,7 @@
import classNames from 'classnames'; import classNames from 'classnames';
import { useMemo } from 'react';
import styles from './loader.module.scss'; import styles from './loader.module.scss';
const pseudoRandom = (seed: number) => { export const pseudoRandom = (seed: number) => {
let value = seed; let value = seed;
return () => { return () => {
value = (value * 16807) % 2147483647; value = (value * 16807) % 2147483647;
@ -10,6 +9,8 @@ const pseudoRandom = (seed: number) => {
}; };
}; };
const generate = pseudoRandom(1);
export interface LoaderProps { export interface LoaderProps {
size?: 'small' | 'large'; size?: 'small' | 'large';
forceTheme?: 'dark' | 'light'; forceTheme?: 'dark' | 'light';
@ -27,8 +28,6 @@ export const Loader = ({ size = 'large', forceTheme }: LoaderProps) => {
size === 'small' ? 'w-[15px] h-[15px]' : 'w-[50px] h-[50px]'; size === 'small' ? 'w-[15px] h-[15px]' : 'w-[50px] h-[50px]';
const items = size === 'small' ? 9 : 25; const items = size === 'small' ? 9 : 25;
const generate = useMemo(() => pseudoRandom(1), []);
return ( return (
<div className="flex flex-col items-center" data-testid="loader"> <div className="flex flex-col items-center" data-testid="loader">
<div className={`${wrapperClasses} flex flex-wrap`}> <div className={`${wrapperClasses} flex flex-wrap`}>