Loading and error states for blocks home route

apps/explorer/src/app/components/status-message/index.tsx

@@ -0,0 +1,12 @@
+import classnames from 'classnames';
+import React from 'react';
+
+interface StatusMessageProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const StatusMessage = ({ children, className }: StatusMessageProps) => {
+  const classes = classnames('font-alpha', 'text-h4', 'mb-28', className);
+  return <h3 className={classes}>{children}</h3>;
+};

apps/explorer/src/app/routes/blocks/home/index.tsx

@@ -2,12 +2,13 @@ import { DATA_SOURCES } from '../../../config';
 import useFetch from '../../../hooks/use-fetch';
 import { TendermintBlockchainResponse } from '../tendermint-blockchain-response';
 import { RouteTitle } from '../../../components/route-title';
+import { StatusMessage } from '../../../components/status-message';
 import { BlocksData, BlocksRefetch } from '../../../components/blocks';
 import { JumpToBlock } from '../../../components/jump-to-block';
 
 const Blocks = () => {
   const {
-    state: { data },
+    state: { data, error, loading },
     refetch,
   } = useFetch<TendermintBlockchainResponse>(
     `${DATA_SOURCES.tendermintUrl}/blockchain`
@@ -16,8 +17,14 @@ const Blocks = () => {
   return (
     <section>
       <RouteTitle>Blocks</RouteTitle>
-      <BlocksRefetch refetch={refetch} />
-      <BlocksData data={data} className="mb-28" />
+      {loading && <StatusMessage>Loading...</StatusMessage>}
+      {error && <StatusMessage>Error: {error}</StatusMessage>}
+      {data && (
+        <>
+          <BlocksRefetch refetch={refetch} />
+          <BlocksData data={data} className="mb-28" />
+        </>
+      )}
       <JumpToBlock />
     </section>
   );