use page query container for market list page, add styles to center loading and error message

apps/trading/components/page-query-container/index.tsx

@@ -1,4 +1,5 @@
-import { QueryHookOptions, useQuery } from '@apollo/client';
+import { OperationVariables, QueryHookOptions, useQuery } from '@apollo/client';
+import classNames from 'classnames';
 import { DocumentNode } from 'graphql';
 import { ReactNode } from 'react';
 
@@ -8,19 +9,25 @@ interface PageQueryContainerProps<TData, TVariables> {
   children: (data: TData) => ReactNode;
 }
 
-export const PageQueryContainer = <TData, TVariables>({
+export const PageQueryContainer = <TData, TVariables = OperationVariables>({
   query,
   options,
   children,
 }: PageQueryContainerProps<TData, TVariables>) => {
   const { data, loading, error } = useQuery<TData, TVariables>(query, options);
+  const splashClasses = classNames(
+    'w-full h-full',
+    'flex items-center justify-center'
+  );
 
   if (loading || !data) {
-    return <div>Loading...</div>;
+    return <div className={splashClasses}>Loading...</div>;
   }
 
   if (error) {
-    return <div>Something went wrong: {error.message}</div>;
+    return (
+      <div className={splashClasses}>Something went wrong: {error.message}</div>
+    );
   }
 
   return <>{children(data)}</>;

apps/trading/pages/markets/index.page.tsx

@@ -1,4 +1,5 @@
 import { gql, useQuery } from '@apollo/client';
+import { PageQueryContainer } from '../../components/page-query-container';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { Markets } from './__generated__/Markets';
@@ -13,32 +14,27 @@ const MARKETS_QUERY = gql`
 
 const Markets = () => {
   const { pathname } = useRouter();
-  const { data, loading, error } = useQuery<Markets>(MARKETS_QUERY);
-
-  if (loading || !data) {
-    return <div>Loading...</div>;
-  }
 
   return (
-    <div>
-      <h1>Markets</h1>
-      {error ? (
-        <div>Could not load markets {error.message}</div>
-      ) : (
-        <ul>
-          {data.markets.map((m) => (
-            <li key={m.id}>
-              <Link
-                href={`${pathname}/${m.id}?portfolio=orders&trade=orderbook`}
-                passHref={true}
-              >
-                <a>View market: {m.id}</a>
-              </Link>
-            </li>
-          ))}
-        </ul>
+    <PageQueryContainer<Markets> query={MARKETS_QUERY}>
+      {(data) => (
+        <>
+          <h1>Markets</h1>
+          <ul>
+            {data.markets.map((m) => (
+              <li key={m.id}>
+                <Link
+                  href={`${pathname}/${m.id}?portfolio=orders&trade=orderbook`}
+                  passHref={true}
+                >
+                  <a>View market: {m.id}</a>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </>
       )}
-    </div>
+    </PageQueryContainer>
   );
 };