chore(ui-toolkit): 4970 async renderer - improve error handling (#5063)

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();
+  });
 });

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">