From abf84b9d458913ac96791a05088ebf8fb786ddb8 Mon Sep 17 00:00:00 2001
From: Maciek <maciek@vegaprotocol.io>
Date: Wed, 18 Oct 2023 11:11:05 +0200
Subject: [PATCH] chore(ui-toolkit): 4970 async renderer - improve error
 handling (#5063)

---
 .../async-renderer/async-renderer.spec.tsx    | 20 ++++++++++++++++++-
 .../async-renderer/async-renderer.tsx         |  2 +-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/libs/ui-toolkit/src/components/async-renderer/async-renderer.spec.tsx b/libs/ui-toolkit/src/components/async-renderer/async-renderer.spec.tsx
index b03f50ace..05b5165bf 100644
--- a/libs/ui-toolkit/src/components/async-renderer/async-renderer.spec.tsx
+++ b/libs/ui-toolkit/src/components/async-renderer/async-renderer.spec.tsx
@@ -2,8 +2,8 @@ import { render, act, screen } from '@testing-library/react';
 import { AsyncRenderer } from './async-renderer';
 
 describe('AsyncRenderer', () => {
+  const reload = jest.fn();
   it('timeout error should render button', async () => {
-    const reload = jest.fn();
     await act(() => {
       render(
         <AsyncRenderer
@@ -20,4 +20,22 @@ describe('AsyncRenderer', () => {
     });
     expect(reload).toHaveBeenCalled();
   });
+
+  it('errors should be handled properly', async () => {
+    const message = 'Node has been collapsed';
+    await act(() => {
+      render(
+        <AsyncRenderer
+          reload={reload}
+          error={new Error(message)}
+          loading={false}
+          data={[]}
+        />
+      );
+    });
+
+    expect(
+      screen.getByText(`Something went wrong: ${message}`)
+    ).toBeInTheDocument();
+  });
 });
diff --git a/libs/ui-toolkit/src/components/async-renderer/async-renderer.tsx b/libs/ui-toolkit/src/components/async-renderer/async-renderer.tsx
index ed0b41b37..7ee333d7d 100644
--- a/libs/ui-toolkit/src/components/async-renderer/async-renderer.tsx
+++ b/libs/ui-toolkit/src/components/async-renderer/async-renderer.tsx
@@ -29,7 +29,7 @@ export function AsyncRenderer<T = object>({
   reload,
 }: AsyncRendererProps<T>) {
   if (error) {
-    if (!data) {
+    if (!data || (Array.isArray(data) && !data.length)) {
       return (
         <div className="h-full flex items-center justify-center">
           <div className="h-12 flex flex-col  items-center">