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
{children}
;
+};
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(
`${DATA_SOURCES.tendermintUrl}/blockchain`
@@ -16,8 +17,14 @@ const Blocks = () => {
return (
Blocks
-
-
+ {loading && Loading...}
+ {error && Error: {error}}
+ {data && (
+ <>
+
+
+ >
+ )}
);