From e97c4dea02e42f16244d2c2c989ed46cbb133082 Mon Sep 17 00:00:00 2001
From: eric <eeoneric@gmail.com>
Date: Wed, 11 Dec 2024 10:27:50 -0500
Subject: [PATCH] reuse

---
 .../data-warehouse/editor/OutputPane.tsx      | 50 ++++++++-----------
 1 file changed, 20 insertions(+), 30 deletions(-)

diff --git a/frontend/src/scenes/data-warehouse/editor/OutputPane.tsx b/frontend/src/scenes/data-warehouse/editor/OutputPane.tsx
index 50ee12e48c44e..5707ac3888293 100644
--- a/frontend/src/scenes/data-warehouse/editor/OutputPane.tsx
+++ b/frontend/src/scenes/data-warehouse/editor/OutputPane.tsx
@@ -69,24 +69,28 @@ export function OutputPane(): JSX.Element {
         })
     }, [response])
 
+    const ErrorState = useMemo((): JSX.Element | null => {
+        return (
+            <div className={clsx('flex-1 absolute top-0 left-0 right-0 bottom-0 overflow-scroll')}>
+                <InsightErrorState
+                    query={sourceQuery}
+                    excludeDetail
+                    title={
+                        queryCancelled
+                            ? 'The query was cancelled'
+                            : response && 'error' in response
+                            ? (response as any).error
+                            : responseError
+                    }
+                />
+            </div>
+        )
+    }, [responseError, sourceQuery, queryCancelled, response])
+
     const Content = (): JSX.Element | null => {
         if (activeTab === OutputTab.Results) {
             if (responseError) {
-                return (
-                    <div className={clsx('flex-1 absolute top-0 left-0 right-0 bottom-0 overflow-scroll')}>
-                        <InsightErrorState
-                            query={sourceQuery}
-                            excludeDetail
-                            title={
-                                queryCancelled
-                                    ? 'The query was cancelled'
-                                    : response && 'error' in response
-                                    ? (response as any).error
-                                    : responseError
-                            }
-                        />
-                    </div>
-                )
+                return ErrorState
             }
 
             return responseLoading ? (
@@ -106,21 +110,7 @@ export function OutputPane(): JSX.Element {
 
         if (activeTab === OutputTab.Visualization) {
             if (responseError) {
-                return (
-                    <div className={clsx('flex-1 absolute top-0 left-0 right-0 bottom-0 overflow-scroll')}>
-                        <InsightErrorState
-                            query={sourceQuery}
-                            excludeDetail
-                            title={
-                                queryCancelled
-                                    ? 'The query was cancelled'
-                                    : response && 'error' in response
-                                    ? (response as any).error
-                                    : responseError
-                            }
-                        />
-                    </div>
-                )
+                return ErrorState
             }
 
             return !response ? (