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

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>
@@ -297,6 +301,9 @@ const getStyles = (theme: GrafanaTheme2) => {
       display: 'flex',
       alignItems: 'center',
     }),
+    pointer: css({
+      cursor: 'pointer',
+    }),
     streaming: css({
       label: 'panel-streaming',
       marginRight: 0,

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(() => {
+    window.setTimeout(() => {
-      setRender(true);
+      setShouldRender(true);
     }, delay);
-    return () => {
-      clearInterval(intervalId);
-    };
   }, [children, delay]);
 
   return <>{shouldRender ? children : null}</>;