From 379b6cde7f29babde0176d9010e9b033d63f970c Mon Sep 17 00:00:00 2001
From: Edd <edd@vega.xyz>
Date: Fri, 16 Dec 2022 18:05:23 +0000
Subject: [PATCH] feat(explorer): initial empty list component on block txs
 list

---
 .../app/components/empty-list/empty-list.tsx  | 30 +++++++++++++++++++
 .../src/app/routes/blocks/id/block.tsx        |  3 +-
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 apps/explorer/src/app/components/empty-list/empty-list.tsx

diff --git a/apps/explorer/src/app/components/empty-list/empty-list.tsx b/apps/explorer/src/app/components/empty-list/empty-list.tsx
new file mode 100644
index 000000000..c54b13ed7
--- /dev/null
+++ b/apps/explorer/src/app/components/empty-list/empty-list.tsx
@@ -0,0 +1,30 @@
+import { t } from "@vegaprotocol/react-helpers";
+
+export type EmptyListProps = {
+    heading?: string
+    label?: string
+};
+
+/**
+ * Renders the empty state from github ticket #1463
+ */
+const EmptyList = ({
+    heading,
+    label
+}: EmptyListProps) => {
+  return (
+    <div className="empty-list w-full items-center h-full align-center">
+        <div className="skeleton-list border-dashed border-neutral-800 rounded p-5 w-full border-[1px] grid gap-4 grid-cols-9 grid-rows-1 place-content-around mb-4">
+            <div className="bg-neutral-900 mr-5 h-3 col-span-5"></div>
+            <div className="bg-neutral-900 h-3 col-span-1"></div>
+        </div>
+
+        <div className="mt-4">
+            {heading ? <h1 className="font-alpha text-xl uppercase text-center leading-relaxed">{heading}</h1> : null}
+            {label ? <p className="font-alpha text-gray-500 text-center">{label}</p> : null}
+        </div>
+    </div>
+  );
+};
+
+export default EmptyList;
diff --git a/apps/explorer/src/app/routes/blocks/id/block.tsx b/apps/explorer/src/app/routes/blocks/id/block.tsx
index 940422e29..5ca6a9279 100644
--- a/apps/explorer/src/app/routes/blocks/id/block.tsx
+++ b/apps/explorer/src/app/routes/blocks/id/block.tsx
@@ -18,6 +18,7 @@ import { RenderFetched } from '../../../components/render-fetched';
 import { t, useFetch } from '@vegaprotocol/react-helpers';
 import { NodeLink } from '../../../components/links';
 import { useDocumentTitle } from '../../../hooks/use-document-title';
+import EmptyList from '../../../components/empty-list/empty-list';
 
 const Block = () => {
   const { block } = useParams<{ block: string }>();
@@ -112,7 +113,7 @@ const Block = () => {
                   blockHeight={blockData.result.block.header.height}
                   txCount={blockData.result.block.data.txs.length}
                 />
-              ) : null}
+              ) : <EmptyList heading={t('This block is empty')} label={t('0 transactions')} />} 
             </>
           )}
         </>