From 342ad7fd1d2b6a4a5210c7ec7e412c35bd103a55 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Tue, 6 Jun 2023 11:35:56 +0100
Subject: [PATCH] [v9.5.x] PanelChrome: Show pointer when hovering cancel query
 button (#69632)

PanelChrome: Show pointer when hovering cancel query button (#69391)

(cherry picked from commit c1d3a2d81e3e91c5aef19c6d066339b89afddbab)

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>
---
 .../src/components/PanelChrome/PanelChrome.tsx           | 9 ++++++++-
 packages/grafana-ui/src/utils/DelayRender.tsx            | 9 +++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
index af1c05c9635..e00f9f04416 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
+++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
@@ -140,7 +140,11 @@ export function PanelChrome({
       {loadingState === LoadingState.Loading && onCancelQuery && (
         <DelayRender delay={2000}>
           <Tooltip content="Cancel query">
-            <TitleItem className={dragClassCancel} data-testid="panel-cancel-query" onClick={onCancelQuery}>
+            <TitleItem
+              className={cx(dragClassCancel, styles.pointer)}
+              data-testid="panel-cancel-query"
+              onClick={onCancelQuery}
+            >
               <Icon name="sync-slash" size="md" />
             </TitleItem>
           </Tooltip>
@@ -298,6 +302,9 @@ const getStyles = (theme: GrafanaTheme2) => {
       display: 'flex',
       alignItems: 'center',
     }),
+    pointer: css({
+      cursor: 'pointer',
+    }),
     streaming: css({
       label: 'panel-streaming',
       marginRight: 0,
diff --git a/packages/grafana-ui/src/utils/DelayRender.tsx b/packages/grafana-ui/src/utils/DelayRender.tsx
index 986837cded4..9439c208922 100644
--- a/packages/grafana-ui/src/utils/DelayRender.tsx
+++ b/packages/grafana-ui/src/utils/DelayRender.tsx
@@ -9,14 +9,11 @@ interface Props {
  * Delay the rendering of the children by N amount of milliseconds
  */
 export function DelayRender({ children, delay }: Props) {
-  const [shouldRender, setRender] = useState(false);
+  const [shouldRender, setShouldRender] = useState(false);
   useEffect(() => {
-    const intervalId = setInterval(() => {
-      setRender(true);
+    window.setTimeout(() => {
+      setShouldRender(true);
     }, delay);
-    return () => {
-      clearInterval(intervalId);
-    };
   }, [children, delay]);
 
   return <>{shouldRender ? children : null}</>;