Fix `TemporaryAlert` (#81384)

packages/grafana-o11y-ds-frontend/src/TemporaryAlert.tsx

@@ -30,22 +30,26 @@ const timeoutMap = {
 export const TemporaryAlert = (props: { severity: AlertVariant; text: string }) => {
   const style = getStyle(useTheme2());
   const [visible, setVisible] = useState(false);
+  const [timer, setTimer] = useState<NodeJS.Timeout>();
 
   useEffect(() => {
-    const timer = setTimeout(() => {
-      setVisible(false);
-    }, timeoutMap[props.severity]);
-
     return () => {
-      clearTimeout(timer);
+      if (timer) {
+        clearTimeout(timer);
+      }
     };
-  }, [props.severity, visible]);
+  }, [timer]);
 
   useEffect(() => {
     if (props.text !== '') {
       setVisible(true);
+
+      const timer = setTimeout(() => {
+        setVisible(false);
+      }, timeoutMap[props.severity]);
+      setTimer(timer);
     }
-  }, [props.text]);
+  }, [props.severity, props.text]);
 
-  return <Alert className={style} elevated={true} title={props.text} severity={props.severity} />;
+  return <>{visible && <Alert className={style} elevated={true} title={props.text} severity={props.severity} />}</>;
 };