fix: blank page if startup subscription fails (#2357)

* feat: add loading skeleton for network loader

* feat: add timeout for subscription check

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 <NetworkLoader cache={cacheConfig}>{children}</NetworkLoader>;
+  return (
+    <NetworkLoader
+      skeleton={<Splash>{t('Loading...')}</Splash>}
+      cache={cacheConfig}
+    >
+      {children}
+    </NetworkLoader>
+  );
 }
 
 export const Web3Provider = ({ children }: { children: ReactNode }) => {

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<StatisticsQuery>({
       query: StatisticsDocument,
@@ -42,6 +52,7 @@ export const requestNode = (
       onStatsFailure();
     });
 
+  // start a subscription for VegaTime and await the first message
   const subscription = client
     .subscribe<BlockTimeSubscription>({
       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;
 };