From 061388938c150c14e76e8220205412acfb076c66 Mon Sep 17 00:00:00 2001
From: sam-keen <samuel.kleinmann@gmail.com>
Date: Mon, 14 Mar 2022 17:06:58 +0000
Subject: [PATCH] Loading and error states for blocks home route

---
 .../src/app/components/status-message/index.tsx     | 12 ++++++++++++
 apps/explorer/src/app/routes/blocks/home/index.tsx  | 13 ++++++++++---
 2 files changed, 22 insertions(+), 3 deletions(-)
 create mode 100644 apps/explorer/src/app/components/status-message/index.tsx

diff --git a/apps/explorer/src/app/components/status-message/index.tsx b/apps/explorer/src/app/components/status-message/index.tsx
new file mode 100644
index 000000000..3c1f1e7dc
--- /dev/null
+++ b/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>;
+};
diff --git a/apps/explorer/src/app/routes/blocks/home/index.tsx b/apps/explorer/src/app/routes/blocks/home/index.tsx
index 28d572153..092f3c565 100644
--- a/apps/explorer/src/app/routes/blocks/home/index.tsx
+++ b/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>
   );