fix: always render a Suspense on the client

Temporary workaround for RevereCRE/relay-nextjs#41

app/pages/_app.tsx

@@ -5,7 +5,7 @@ import { getClientEnvironment } from "../lib/relay/client";
 import "normalize.css";
 import BCGovTypography from "components/BCGovTypography";
 import SessionExpiryHandler from "components/Session/SessionExpiryHandler";
-
+import { Suspense } from "react";
 const clientEnv = getClientEnvironment();
 const initialPreloadedQuery = getInitialPreloadedQuery({
   createClientEnvironment: () => getClientEnvironment()!,
@@ -15,11 +15,20 @@ function MyApp({ Component, pageProps }: AppProps) {
   const relayProps = getRelayProps(pageProps, initialPreloadedQuery);
   const env = relayProps.preloadedQuery?.environment ?? clientEnv!;
 
+  const component =
+    typeof window !== "undefined" ? (
+      <Suspense fallback="loading">
+        <Component {...pageProps} {...relayProps} />
+      </Suspense>
+    ) : (
+      <Component {...pageProps} {...relayProps} />
+    );
+
   return (
     <RelayEnvironmentProvider environment={env}>
       {typeof window !== "undefined" && <SessionExpiryHandler />}
       <BCGovTypography />
-      <Component {...pageProps} {...relayProps} />
+      {component}
     </RelayEnvironmentProvider>
   );
 }