From b0227cf9dcfa6abfa53c56a8bae86d1cb2d5e581 Mon Sep 17 00:00:00 2001
From: Jordi Enric <37541088+jordienr@users.noreply.github.com>
Date: Fri, 27 Feb 2026 11:43:34 +0100
Subject: [PATCH] fix: custom report gets stuck block after deleting sql
 snippet (#43210)

- Deleted SQL Snippets leave a hanging block that loads forever in
custom reports, and its not possible to delete them.
- Now you can delete blocks if they get stuck loading
- Also shows correct error state when a block couldn't load because the
sql snippet was removed
## before
- stuck forever
<img width="1296" height="936" alt="CleanShot 2026-02-26 at 13 23 25@2x"
src="https://github.com/user-attachments/assets/bb65cc5f-c2a4-4027-876e-db9682ec6f3c"
/>

## after
- show error state
- allow user to delete snippet
<img width="1388" height="862" alt="CleanShot 2026-02-26 at 13 23 45@2x"
src="https://github.com/user-attachments/assets/c5d6c114-071b-4e4d-a913-25b3c788db95"
/>

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
---
 .../Reports/ReportBlock/ReportBlock.tsx       |  22 ++--
 .../components/ui/QueryBlock/QueryBlock.tsx   | 101 +++++++++---------
 2 files changed, 62 insertions(+), 61 deletions(-)

diff --git a/apps/studio/components/interfaces/Reports/ReportBlock/ReportBlock.tsx b/apps/studio/components/interfaces/Reports/ReportBlock/ReportBlock.tsx
index d6fe1a27cee..34f540c3842 100644
--- a/apps/studio/components/interfaces/Reports/ReportBlock/ReportBlock.tsx
+++ b/apps/studio/components/interfaces/Reports/ReportBlock/ReportBlock.tsx
@@ -63,8 +63,8 @@ export const ReportBlock = ({
       refetchOnWindowFocus: false,
       refetchOnMount: false,
       refetchIntervalInBackground: false,
-      retry: (failureCount: number) => {
-        if (failureCount >= 2) return false
+      retry: (failureCount: number, error) => {
+        if (error.code === 404 || failureCount >= 2) return false
         return true
       },
     }
@@ -151,18 +151,16 @@ export const ReportBlock = ({
                 ? String(executeSqlError)
                 : undefined
           }
-          isExecuting={executeSqlLoading}
+          isExecuting={!contentError && executeSqlLoading}
           isWriteQuery={isWriteQuery}
           actions={
-            !isLoadingContent && (
-              <ButtonTooltip
-                type="text"
-                icon={<X />}
-                className="w-7 h-7"
-                onClick={() => onRemoveChart({ metric: { key: item.attribute } })}
-                tooltip={{ content: { side: 'bottom', text: 'Remove chart' } }}
-              />
-            )
+            <ButtonTooltip
+              type="text"
+              icon={<X />}
+              className="w-7 h-7"
+              onClick={() => onRemoveChart({ metric: { key: item.attribute } })}
+              tooltip={{ content: { side: 'bottom', text: 'Remove chart' } }}
+            />
           }
           onExecute={(queryType) => {
             refetch()
diff --git a/apps/studio/components/ui/QueryBlock/QueryBlock.tsx b/apps/studio/components/ui/QueryBlock/QueryBlock.tsx
index c8a4bf9a38c..d6d530ebbe3 100644
--- a/apps/studio/components/ui/QueryBlock/QueryBlock.tsx
+++ b/apps/studio/components/ui/QueryBlock/QueryBlock.tsx
@@ -146,59 +146,62 @@ export const QueryBlock = ({
       label={label}
       badge={isWriteQuery && <Badge variant="warning">Write</Badge>}
       actions={
-        disabled ? null : (
-          <>
-            <ButtonTooltip
-              type="text"
-              size="tiny"
-              className="w-7 h-7"
-              icon={<Code size={14} strokeWidth={1.5} />}
-              onClick={() => setShowSql(!showSql)}
-              tooltip={{
-                content: { side: 'bottom', text: showSql ? 'Hide query' : 'Show query' },
-              }}
-            />
-            {hasResults && (
-              <BlockViewConfiguration
-                view={view}
-                isChart={view === 'chart'}
-                lockColumns={false}
-                chartConfig={chartSettings}
-                columns={Object.keys(results?.[0] ?? {})}
-                changeView={(nextView) => {
-                  if (onUpdateChartConfig) onUpdateChartConfig({ chartConfig: { view: nextView } })
-                  setChartSettings({ ...chartSettings, view: nextView })
-                }}
-                updateChartConfig={(config) => {
-                  if (onUpdateChartConfig) onUpdateChartConfig({ chartConfig: config })
-                  setChartSettings(config)
+        <>
+          {!disabled && (
+            <>
+              <ButtonTooltip
+                type="text"
+                size="tiny"
+                className="w-7 h-7"
+                icon={<Code size={14} strokeWidth={1.5} />}
+                onClick={() => setShowSql(!showSql)}
+                tooltip={{
+                  content: { side: 'bottom', text: showSql ? 'Hide query' : 'Show query' },
                 }}
               />
-            )}
+              {hasResults && (
+                <BlockViewConfiguration
+                  view={view}
+                  isChart={view === 'chart'}
+                  lockColumns={false}
+                  chartConfig={chartSettings}
+                  columns={Object.keys(results?.[0] ?? {})}
+                  changeView={(nextView) => {
+                    if (onUpdateChartConfig)
+                      onUpdateChartConfig({ chartConfig: { view: nextView } })
+                    setChartSettings({ ...chartSettings, view: nextView })
+                  }}
+                  updateChartConfig={(config) => {
+                    if (onUpdateChartConfig) onUpdateChartConfig({ chartConfig: config })
+                    setChartSettings(config)
+                  }}
+                />
+              )}
 
-            <EditQueryButton id={id} title={label} sql={sql} />
-            <ButtonTooltip
-              type="text"
-              size="tiny"
-              className="w-7 h-7"
-              icon={<Play size={14} strokeWidth={1.5} />}
-              loading={isExecuting}
-              disabled={isExecuting || disabled || !sql}
-              onClick={runSelect}
-              tooltip={{
-                content: {
-                  side: 'bottom',
-                  className: 'max-w-56 text-center',
-                  text: isExecuting
-                    ? 'Query is running. Check the SQL Editor to manage running queries.'
-                    : 'Run query',
-                },
-              }}
-            />
+              <EditQueryButton id={id} title={label} sql={sql} />
+              <ButtonTooltip
+                type="text"
+                size="tiny"
+                className="w-7 h-7"
+                icon={<Play size={14} strokeWidth={1.5} />}
+                loading={isExecuting}
+                disabled={isExecuting || disabled || !sql}
+                onClick={runSelect}
+                tooltip={{
+                  content: {
+                    side: 'bottom',
+                    className: 'max-w-56 text-center',
+                    text: isExecuting
+                      ? 'Query is running. Check the SQL Editor to manage running queries.'
+                      : 'Run query',
+                  },
+                }}
+              />
+            </>
+          )}
 
-            {actions}
-          </>
-        )
+          {actions}
+        </>
       }
     >
       {!!showWarning && !blockWriteQueries && (