From d61deb2639b7400a04ff55adb860d21dab6cf342 Mon Sep 17 00:00:00 2001
From: RunDevelopment <mitchi5000.ms@googlemail.com>
Date: Sat, 2 Dec 2023 13:57:11 +0100
Subject: [PATCH] Add open delay to status tooltips

---
 .../components/node/NodeFooter/Timer.tsx      |   1 +
 .../node/NodeFooter/ValidityIndicator.tsx     | 107 ++++++++----------
 2 files changed, 46 insertions(+), 62 deletions(-)

diff --git a/src/renderer/components/node/NodeFooter/Timer.tsx b/src/renderer/components/node/NodeFooter/Timer.tsx
index 78563e107..f66f19ec7 100644
--- a/src/renderer/components/node/NodeFooter/Timer.tsx
+++ b/src/renderer/components/node/NodeFooter/Timer.tsx
@@ -63,6 +63,7 @@ export const Timer = memo(({ time }: TimerProps) => {
             closeOnClick={false}
             gutter={24}
             label={`Execution took approximately ${joinEnglish(longParts)}.`}
+            openDelay={150}
             px={2}
             textAlign="center"
         >
diff --git a/src/renderer/components/node/NodeFooter/ValidityIndicator.tsx b/src/renderer/components/node/NodeFooter/ValidityIndicator.tsx
index 513110a12..46fcae184 100644
--- a/src/renderer/components/node/NodeFooter/ValidityIndicator.tsx
+++ b/src/renderer/components/node/NodeFooter/ValidityIndicator.tsx
@@ -15,80 +15,63 @@ interface ValidityIndicatorProps {
 export const ValidityIndicator = memo(({ validity, animated }: ValidityIndicatorProps) => {
     const { paused } = useContext(ExecutionStatusContext);
 
-    // eslint-disable-next-line no-nested-ternary
-    return animated ? (
-        paused ? (
-            <Tooltip
-                hasArrow
-                borderRadius={8}
-                closeOnClick={false}
-                gutter={24}
-                label="This node is currently paused"
-                px={2}
-                textAlign="center"
-            >
-                <Center className="nodrag">
-                    <Center
-                        bgColor="var(--node-valid-bg)"
-                        borderRadius={100}
-                        h="auto"
-                        w="auto"
-                    >
-                        <Icon
-                            as={IoIosPause}
-                            boxSize="1rem"
-                            color="var(--node-valid-fg)"
-                            cursor="default"
-                            m="auto"
-                        />
-                    </Center>
-                </Center>
-            </Tooltip>
-        ) : (
-            <Tooltip
-                hasArrow
-                borderRadius={8}
-                closeOnClick={false}
-                gutter={24}
-                label="This node is currently running..."
-                px={2}
-                textAlign="center"
-            >
-                <Center className="nodrag">
-                    <Spinner size="xs" />
-                </Center>
-            </Tooltip>
-        )
-    ) : (
-        <Tooltip
-            hasArrow
-            borderRadius={8}
-            closeOnClick={false}
-            gutter={24}
-            label={
-                <Markdown nonInteractive>
-                    {validity.isValid ? 'Node valid' : validity.reason}
-                </Markdown>
-            }
-            px={2}
-            textAlign="center"
-        >
-            <Center className="nodrag">
+    let icon;
+    let text;
+    if (animated) {
+        if (paused) {
+            text = 'This node is currently paused';
+            icon = (
                 <Center
-                    bgColor={validity.isValid ? 'var(--node-valid-bg)' : 'var(--node-invalid-bg)'}
+                    bgColor="var(--node-valid-bg)"
                     borderRadius={100}
                     h="auto"
                     w="auto"
                 >
                     <Icon
-                        as={validity.isValid ? BsCheck : BsExclamation}
+                        as={IoIosPause}
                         boxSize="1rem"
-                        color={validity.isValid ? 'var(--node-valid-fg)' : 'var(--node-invalid-fg)'}
+                        color="var(--node-valid-fg)"
                         cursor="default"
                         m="auto"
                     />
                 </Center>
+            );
+        } else {
+            text = 'This node is currently running...';
+            icon = <Spinner size="xs" />;
+        }
+    } else {
+        text = validity.isValid ? 'Node valid' : validity.reason;
+        icon = (
+            <Center
+                bgColor={validity.isValid ? 'var(--node-valid-bg)' : 'var(--node-invalid-bg)'}
+                borderRadius={100}
+                h="auto"
+                w="auto"
+            >
+                <Icon
+                    as={validity.isValid ? BsCheck : BsExclamation}
+                    boxSize="1rem"
+                    color={validity.isValid ? 'var(--node-valid-fg)' : 'var(--node-invalid-fg)'}
+                    cursor="default"
+                    m="auto"
+                />
             </Center>
+        );
+    }
+
+    return (
+        <Tooltip
+            hasArrow
+            borderRadius={8}
+            closeOnClick={false}
+            gutter={24}
+            label={<Markdown nonInteractive>{text}</Markdown>}
+            openDelay={150}
+            px={2}
+            textAlign="center"
+        >
+            <Center className="nodrag">{icon}</Center>
         </Tooltip>
     );
 });