chore: add pseudo random generator

apps/trading/components/app-loader/app-loader.tsx

@@ -12,7 +12,7 @@ import type { ReactNode } from 'react';
 import { AppFailure } from './app-failure';
 import { Web3Provider } from './web3-provider';
 
-const DynamicLoader = dynamic(() => import('../preloader/preloader'), {
+export const DynamicLoader = dynamic(() => import('../preloader/preloader'), {
   loading: () => <>Loading...</>,
 });
 

apps/trading/pages/_app.page.tsx

@@ -25,7 +25,7 @@ import './styles.css';
 import './gen-styles.scss';
 import { useGlobalStore, usePageTitleStore } from '../stores';
 import { Footer } from '../components/footer';
-import { useMemo, useState } from 'react';
+import { useMemo, useState} from 'react';
 import DialogsContainer from './dialogs-container';
 import ToastsManager from './toasts-manager';
 import { HashRouter, useLocation, useSearchParams } from 'react-router-dom';
@@ -33,7 +33,8 @@ import { Connectors } from '../lib/vega-connectors';
 import { ViewingBanner } from '../components/viewing-banner';
 import { Banner } from '../components/banner';
 import classNames from 'classnames';
-import { AppLoader } from '../components/app-loader';
+import { AppLoader, DynamicLoader } from '../components/app-loader';
+
 
 const DEFAULT_TITLE = t('Welcome to Vega trading!');
 
@@ -115,7 +116,7 @@ function VegaTradingApp(props: AppProps) {
   // Prevent HashRouter from being server side rendered as it
   // relies on presence of document object
   if (status === 'default') {
-    return null;
+    return <DynamicLoader />;
   }
 
   return (

libs/ui-toolkit/src/components/loader/loader.tsx

@@ -1,5 +1,13 @@
 import classNames from 'classnames';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+
+const pseudoRandom = (seed: number) => {
+  let value = seed;
+  return () => {
+    value = (value * 16807) % 2147483647;
+    return value / 1000000000;
+  };
+};
 
 export interface LoaderProps {
   size?: 'small' | 'large';
@@ -35,6 +43,8 @@ export const Loader = ({
     size === 'small' ? 'w-[15px] h-[15px]' : 'w-[50px] h-[50px]';
   const items = size === 'small' ? 9 : 16;
 
+  const generate = useMemo(() => pseudoRandom(1), []);
+
   return (
     <div
       className="flex flex-col items-center pre-loader-center"
@@ -47,7 +57,7 @@ export const Loader = ({
               className={itemClasses}
               key={i}
               style={{
-                opacity: Math.random() > 0.75 ? 1 : 0,
+                opacity: generate() > 1.5 ? 1 : 0,
               }}
             />
           );