feat(explorer): initial empty list component on block txs list

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;

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')} />} 
             </>
           )}
         </>