diff --git a/apps/trading/components/app-loader/index.tsx b/apps/trading/components/app-loader/index.tsx index 906d4c3cd..17844f4ad 100644 --- a/apps/trading/components/app-loader/index.tsx +++ b/apps/trading/components/app-loader/index.tsx @@ -8,7 +8,8 @@ import { Web3Provider as Web3ProviderInternal, useWeb3ConnectStore, } from '@vegaprotocol/web3'; -import { AsyncRenderer } from '@vegaprotocol/ui-toolkit'; +import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit'; +import { t } from '@vegaprotocol/react-helpers'; interface AppLoaderProps { children: ReactNode; @@ -19,7 +20,14 @@ interface AppLoaderProps { * that must happen for it can be used */ export function AppLoader({ children }: AppLoaderProps) { - return {children}; + return ( + {t('Loading...')}} + cache={cacheConfig} + > + {children} + + ); } export const Web3Provider = ({ children }: { children: ReactNode }) => { diff --git a/libs/environment/src/utils/request-node.ts b/libs/environment/src/utils/request-node.ts index 4fd133a77..8dec63107 100644 --- a/libs/environment/src/utils/request-node.ts +++ b/libs/environment/src/utils/request-node.ts @@ -12,6 +12,12 @@ type Callbacks = { onSubscriptionFailure: () => void; }; +const SUBSCRIPTION_TIMEOUT = 3000; + +/** + * Makes a single stats request and attempts a subscrition to VegaTime + * to determine whether or not a node is suitable for use + */ export const requestNode = ( url: string, { @@ -21,6 +27,7 @@ export const requestNode = ( onSubscriptionFailure, }: Callbacks ) => { + // check url is a valid url try { new URL(url); } catch (err) { @@ -29,8 +36,11 @@ export const requestNode = ( return; } + let subscriptionSucceeded = false; + const client = createClient(url); + // make a query for block height client .query({ query: StatisticsDocument, @@ -42,6 +52,7 @@ export const requestNode = ( onStatsFailure(); }); + // start a subscription for VegaTime and await the first message const subscription = client .subscribe({ query: BlockTimeDocument, @@ -49,6 +60,7 @@ export const requestNode = ( }) .subscribe({ next() { + subscriptionSucceeded = true; onSubscriptionSuccess(); subscription.unsubscribe(); }, @@ -58,5 +70,14 @@ export const requestNode = ( }, }); + // start a timeout, if the above subscription doesn't yield any messages + // before the timeout has completed consider it failed + setTimeout(() => { + if (!subscriptionSucceeded) { + onSubscriptionFailure(); + subscription.unsubscribe(); + } + }, SUBSCRIPTION_TIMEOUT); + return client; };