From 74bf11e596f2270f5c01df4287338a5b6e041e6a Mon Sep 17 00:00:00 2001
From: Marc-Antoine Hinse <marc.antoine@flare.io>
Date: Thu, 28 Nov 2024 11:33:08 -0500
Subject: [PATCH] Added a loading animation when initializing the data of a
 configuration step

- Return null instead of hidden the HTML elements of a step to avoid useless rendering
- Reset the data of the ConfigurationStep.Completed when re-editing
- Shiny spinning Flare logo when loading the data
---
 .../src/ConfigurationScreen.tsx               |  3 -
 .../components/ConfigurationCompletedStep.tsx | 20 ++++-
 .../components/ConfigurationInitialStep.tsx   | 59 ++++++++-----
 .../ConfigurationUserPreferencesStep.tsx      | 17 +++-
 .../src/components/FlareLogoLoading.css       | 18 ++++
 .../src/components/FlareLogoLoading.tsx       | 16 ++++
 .../src/components/icons/FlareLogo.tsx        | 86 +++++++++++++++++++
 7 files changed, 188 insertions(+), 31 deletions(-)
 create mode 100644 packages/react-components/src/components/FlareLogoLoading.css
 create mode 100644 packages/react-components/src/components/FlareLogoLoading.tsx
 create mode 100644 packages/react-components/src/components/icons/FlareLogo.tsx

diff --git a/packages/react-components/src/ConfigurationScreen.tsx b/packages/react-components/src/ConfigurationScreen.tsx
index 1c9f75d..3456c45 100644
--- a/packages/react-components/src/ConfigurationScreen.tsx
+++ b/packages/react-components/src/ConfigurationScreen.tsx
@@ -57,7 +57,6 @@ const ConfigurationScreen: FC<{ theme: string }> = ({ theme }) => {
                 <div className="content-step">
                     <h2>Configure your Flare Account</h2>
                     <ConfigurationInitialStep
-                        show={configurationStep === ConfigurationStep.Initial}
                         configurationStep={configurationStep}
                         apiKey={apiKey}
                         onCancelConfigurationClick={handleBackButton}
@@ -67,7 +66,6 @@ const ConfigurationScreen: FC<{ theme: string }> = ({ theme }) => {
                         setApiKey={setApiKey}
                     />
                     <ConfigurationUserPreferencesStep
-                        show={configurationStep === ConfigurationStep.UserPreferences}
                         configurationStep={configurationStep}
                         apiKey={apiKey}
                         onNavigateBackClick={handleBackButton}
@@ -76,7 +74,6 @@ const ConfigurationScreen: FC<{ theme: string }> = ({ theme }) => {
                         }
                     />
                     <ConfigurationCompletedStep
-                        show={configurationStep === ConfigurationStep.Completed}
                         apiKey={apiKey}
                         configurationStep={configurationStep}
                         onEditConfigurationClick={handleBackButton}
diff --git a/packages/react-components/src/components/ConfigurationCompletedStep.tsx b/packages/react-components/src/components/ConfigurationCompletedStep.tsx
index bd3a45f..4229e59 100644
--- a/packages/react-components/src/components/ConfigurationCompletedStep.tsx
+++ b/packages/react-components/src/components/ConfigurationCompletedStep.tsx
@@ -9,13 +9,14 @@ import ArrowRightIcon from './icons/ArrowRightIcon';
 
 import { ConfigurationStep, Tenant } from '../models/flare';
 import './ConfigurationGlobalStep.css';
+import FlareLogoLoading from './FlareLogoLoading';
 
 const ConfigurationCompletedStep: FC<{
-    show: boolean;
     apiKey: string;
     configurationStep: ConfigurationStep;
     onEditConfigurationClick: () => void;
-}> = ({ show, apiKey, configurationStep, onEditConfigurationClick }) => {
+}> = ({ apiKey, configurationStep, onEditConfigurationClick }) => {
+    const [isInitializingData, setIsInitializingData] = useState(true);
     const [flareSearchUrl, setFlareSearchUrl] = useState('');
     const [tenantName, setTenantName] = useState('');
 
@@ -28,13 +29,26 @@ const ConfigurationCompletedStep: FC<{
                         userTenants.find((tenant: Tenant) => tenant.id === tenantId)?.name ||
                             'unknown'
                     );
+                    setIsInitializingData(false);
                 }
             );
+        } else {
+            setIsInitializingData(true);
+            setFlareSearchUrl('');
+            setTenantName('');
         }
     }, [configurationStep, apiKey]);
 
+    if (configurationStep !== ConfigurationStep.Completed) {
+        return null;
+    }
+
+    if (isInitializingData) {
+        return <FlareLogoLoading />;
+    }
+
     return (
-        <div hidden={!show}>
+        <div>
             <h5>
                 {`You can now access `}
                 <b>{tenantName}</b>
diff --git a/packages/react-components/src/components/ConfigurationInitialStep.tsx b/packages/react-components/src/components/ConfigurationInitialStep.tsx
index a79c432..b882b05 100644
--- a/packages/react-components/src/components/ConfigurationInitialStep.tsx
+++ b/packages/react-components/src/components/ConfigurationInitialStep.tsx
@@ -9,57 +9,72 @@ import { fetchApiKeyValidation } from '../utils/setupConfiguration';
 import './ConfigurationGlobalStep.css';
 import './ConfigurationInitialStep.css';
 import { ToastKeys, toastManager } from './ToastManager';
+import FlareLogoLoading from './FlareLogoLoading';
 
 const ConfigurationInitialStep: FC<{
-    show?: boolean;
     configurationStep: ConfigurationStep;
     apiKey?: string;
     setApiKey: (apiKey: string) => void;
     onCancelConfigurationClick: () => void;
     onApiKeyValidated: () => void;
 }> = ({
-    show = false,
     configurationStep,
-    apiKey = '',
+    apiKey = undefined,
     setApiKey,
     onCancelConfigurationClick,
     onApiKeyValidated,
 }) => {
+    const [isInitializingData, setIsInitializingData] = useState(true);
     const [errorMessage, setErrorMessage] = useState('');
     const [isLoading, setIsLoading] = useState(false);
     const handleApiKeyChange = (e): void => setApiKey(e.target.value);
 
     const handleSubmitApiKey = (): void => {
-        setIsLoading(true);
-        fetchApiKeyValidation(apiKey)
-            .then(() => {
-                setErrorMessage('');
-                setIsLoading(false);
-                onApiKeyValidated();
-            })
-            .catch((error: any) => {
-                setErrorMessage(error.data);
-                setIsLoading(false);
-                toastManager.show({
-                    id: ToastKeys.ERROR,
-                    isError: true,
-                    content: 'Something went wrong. Please review your form.',
+        if (apiKey !== undefined) {
+            setIsLoading(true);
+            fetchApiKeyValidation(apiKey)
+                .then(() => {
+                    setErrorMessage('');
+                    setIsLoading(false);
+                    onApiKeyValidated();
+                })
+                .catch((error: any) => {
+                    setErrorMessage(error.data);
+                    setIsLoading(false);
+                    toastManager.show({
+                        id: ToastKeys.ERROR,
+                        isError: true,
+                        content: 'Something went wrong. Please review your form.',
+                    });
                 });
-            });
+        }
     };
 
     const isFormValid = (): boolean => {
-        return apiKey.length > 0;
+        return apiKey !== undefined && apiKey.length > 0;
     };
 
     useEffect(() => {
-        if (configurationStep !== ConfigurationStep.Initial) {
+        if (configurationStep === ConfigurationStep.Initial) {
+            if (apiKey !== undefined) {
+                setIsInitializingData(false);
+            }
+        } else {
             setIsLoading(false);
+            setIsInitializingData(true);
         }
-    }, [configurationStep]);
+    }, [configurationStep, apiKey]);
+
+    if (configurationStep !== ConfigurationStep.Initial) {
+        return null;
+    }
+
+    if (isInitializingData) {
+        return <FlareLogoLoading />;
+    }
 
     return (
-        <div hidden={!show}>
+        <div>
             <h5>Enter your API key</h5>
             <div className="form-group">
                 <div className="form-item">
diff --git a/packages/react-components/src/components/ConfigurationUserPreferencesStep.tsx b/packages/react-components/src/components/ConfigurationUserPreferencesStep.tsx
index e47a4e6..3857eb3 100644
--- a/packages/react-components/src/components/ConfigurationUserPreferencesStep.tsx
+++ b/packages/react-components/src/components/ConfigurationUserPreferencesStep.tsx
@@ -34,14 +34,15 @@ import SourceTypeCategoryOptions from './SourceTypeCategoryOptions';
 import Switch from './Switch';
 import { ToastKeys, toastManager } from './ToastManager';
 import Tooltip from './Tooltip';
+import FlareLogoLoading from './FlareLogoLoading';
 
 const ConfigurationUserPreferencesStep: FC<{
-    show: boolean;
     configurationStep: ConfigurationStep;
     apiKey: string;
     onNavigateBackClick: () => void;
     onUserPreferencesSaved: () => void;
-}> = ({ show, configurationStep, apiKey, onNavigateBackClick, onUserPreferencesSaved }) => {
+}> = ({ configurationStep, apiKey, onNavigateBackClick, onUserPreferencesSaved }) => {
+    const [isInitializingData, setIsInitializingData] = useState(true);
     const [tenantId, setTenantId] = useState<number | undefined>(undefined);
     const [tenants, setUserTenants] = useState<Tenant[]>([]);
     const [selectedSeverities, setSelectedSeverities] = useState<Severity[]>([]);
@@ -132,6 +133,7 @@ const ConfigurationUserPreferencesStep: FC<{
                                 allSourceTypeCategories
                             )
                         );
+                        setIsInitializingData(false);
                     }
                 )
                 .catch(() => {
@@ -151,6 +153,7 @@ const ConfigurationUserPreferencesStep: FC<{
             setSelectedSeverities([]);
             setSourceTypeCategories([]);
             setSelectedSourceTypes([]);
+            setIsInitializingData(true);
         }
     }, [configurationStep, apiKey]);
 
@@ -162,8 +165,16 @@ const ConfigurationUserPreferencesStep: FC<{
         );
     };
 
+    if (configurationStep !== ConfigurationStep.UserPreferences) {
+        return null;
+    }
+
+    if (isInitializingData) {
+        return <FlareLogoLoading />;
+    }
+
     return (
-        <div hidden={!show}>
+        <div>
             <h5>Please select the Tenant you want to ingest events from</h5>
             <div className="form-group">
                 <div className="form-item">
diff --git a/packages/react-components/src/components/FlareLogoLoading.css b/packages/react-components/src/components/FlareLogoLoading.css
new file mode 100644
index 0000000..c538b0c
--- /dev/null
+++ b/packages/react-components/src/components/FlareLogoLoading.css
@@ -0,0 +1,18 @@
+.flare-logo-loading-container {
+    position: relative;
+    top: 100%;
+    left: 50%;
+    margin-left: -2.5rem;
+}
+
+.flare-logo-loading-svg {
+    transform-origin: 50% 50%;
+    animation: rotate-flare-logo 0.4s linear infinite;
+}
+
+/* Animations */
+@keyframes rotate-flare-logo {
+    100% {
+        transform: rotate(90deg);
+    }
+}
diff --git a/packages/react-components/src/components/FlareLogoLoading.tsx b/packages/react-components/src/components/FlareLogoLoading.tsx
new file mode 100644
index 0000000..4280625
--- /dev/null
+++ b/packages/react-components/src/components/FlareLogoLoading.tsx
@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+
+import './FlareLogoLoading.css';
+import FlareLogo from './icons/FlareLogo';
+
+const FlareLogoLoading: FC<{ hidden?: boolean }> = ({ hidden }) => {
+    return (
+        <div className="flare-logo-loading-container" hidden={hidden}>
+            <div className="flare-logo-loading-svg">
+                <FlareLogo remSize={5} />
+            </div>
+        </div>
+    );
+};
+
+export default FlareLogoLoading;
diff --git a/packages/react-components/src/components/icons/FlareLogo.tsx b/packages/react-components/src/components/icons/FlareLogo.tsx
new file mode 100644
index 0000000..65eedfb
--- /dev/null
+++ b/packages/react-components/src/components/icons/FlareLogo.tsx
@@ -0,0 +1,86 @@
+import React, { FC } from 'react';
+
+const FlareLogo: FC<{ remSize: number; hidden?: boolean }> = ({ remSize, hidden }) => {
+    return (
+        <div
+            style={{
+                width: `${remSize}rem`,
+                height: `${remSize}rem`,
+            }}
+            hidden={hidden}
+        >
+            <svg
+                width={`${remSize}rem`}
+                height={`${remSize}rem`}
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M15.1966 7.5157C13.1965 5.33434 13.4865 2.08731 13.4915 2.01227C13.5187 1.52341 13.3569 1.04281 13.0396 0.670093C12.7223 0.297376 12.2738 0.0611214 11.7871 0.0103013C11.3004 -0.0405188 10.8129 0.0979925 10.4255 0.397124C10.0381 0.696256 9.78059 1.13307 9.70636 1.61702C9.70636 1.81714 9.20634 6.57011 12.3465 10.0473C12.7651 10.5032 13.2274 10.9171 13.7265 11.2831C15.1769 10.3201 16.8115 9.66923 18.5267 9.37186C17.1066 8.89656 16.0116 8.41126 15.1966 7.5157ZM11.9114 2.64266C11.8195 2.67299 11.7232 2.6882 11.6264 2.68769C11.4163 2.69066 11.2121 2.61834 11.0507 2.48378C10.8893 2.34923 10.7813 2.16132 10.7463 1.95404C10.7112 1.74676 10.7515 1.53377 10.8597 1.35359C10.9679 1.17341 11.137 1.03792 11.3364 0.971617C11.4275 0.937299 11.5241 0.92033 11.6214 0.921585C11.7373 0.920863 11.8521 0.94303 11.9594 0.986817C12.0666 1.0306 12.1642 1.09515 12.2464 1.17674C12.3296 1.25814 12.3955 1.35548 12.4401 1.46293C12.4848 1.57039 12.5074 1.68576 12.5065 1.80213C12.5065 1.98665 12.4493 2.16663 12.3427 2.3172C12.2361 2.46778 12.0854 2.5815 11.9114 2.64266Z"
+                    fill="url(#paint0_linear_174_354)"
+                />
+                <path
+                    d="M10.9114 13.1542C10.4927 12.6983 10.0305 12.2844 9.53137 11.9185C8.08424 12.8842 6.45063 13.5353 4.73621 13.8296C6.15126 14.2999 7.23629 14.7902 8.06632 15.6858C10.0664 17.8622 9.77638 21.1142 9.76638 21.1892C9.73915 21.6781 9.90097 22.1587 10.2183 22.5314C10.5356 22.9041 10.9841 23.1404 11.4708 23.1912C11.9574 23.242 12.445 23.1035 12.8324 22.8044C13.2198 22.5053 13.4773 22.0684 13.5515 21.5845C13.5815 21.3844 14.0515 16.6264 10.9114 13.1542ZM11.9565 22.2299C11.863 22.2615 11.7651 22.2783 11.6664 22.2799C11.4321 22.2784 11.2077 22.185 11.0414 22.0198C10.9587 21.938 10.8932 21.8406 10.8485 21.7332C10.8039 21.6259 10.7811 21.5107 10.7814 21.3944C10.7824 21.2107 10.8401 21.0318 10.9466 20.8823C11.0531 20.7327 11.2033 20.6197 11.3764 20.5589C11.4682 20.5273 11.5644 20.5104 11.6614 20.5088C11.7784 20.5084 11.8944 20.5311 12.0025 20.5758C12.1106 20.6204 12.2089 20.6861 12.2915 20.769C12.3729 20.8504 12.4373 20.9471 12.4811 21.0536C12.5249 21.1601 12.5471 21.2742 12.5465 21.3894C12.5484 21.5736 12.4925 21.7538 12.3866 21.9046C12.2808 22.0554 12.1303 22.1692 11.9565 22.2299Z"
+                    fill="url(#paint1_linear_174_354)"
+                />
+                <path
+                    d="M9.36134 4.68896C8.91132 6.11986 8.41131 7.20554 7.51127 8.02105C5.3312 10.0223 2.08608 9.73212 2.01108 9.72211C1.52251 9.69487 1.0422 9.85678 0.669698 10.1743C0.297201 10.4918 0.0610854 10.9405 0.0102952 11.4275C-0.040495 11.9145 0.0979348 12.4023 0.396891 12.7899C0.695846 13.1776 1.1324 13.4352 1.61607 13.5095C1.81607 13.5095 6.56624 14.0098 10.0414 10.8678C10.4983 10.4501 10.912 9.98752 11.2764 9.48696C10.3113 8.03842 9.65903 6.40423 9.36134 4.68896ZM2.4711 12.2587C2.3779 12.3558 2.26312 12.4295 2.13609 12.4738C2.04414 12.5042 1.94789 12.5194 1.85108 12.5189C1.73377 12.5189 1.61763 12.4957 1.50932 12.4506C1.40101 12.4055 1.30267 12.3395 1.21995 12.2563C1.13724 12.173 1.07179 12.0743 1.02735 11.9656C0.98292 11.857 0.960385 11.7407 0.961044 11.6233C0.962012 11.4396 1.01971 11.2608 1.12623 11.1112C1.23275 10.9616 1.38288 10.8487 1.55606 10.7878C1.64721 10.7538 1.74381 10.7368 1.84107 10.7377C2.07626 10.7377 2.30189 10.8309 2.46866 10.9968C2.63543 11.1627 2.72978 11.388 2.73111 11.6233C2.73337 11.7414 2.71148 11.8586 2.66676 11.9679C2.62205 12.0772 2.55546 12.1761 2.4711 12.2587Z"
+                    fill="url(#paint2_linear_174_354)"
+                />
+                <path
+                    d="M21.6568 9.68683C21.4568 9.68683 16.7066 9.18652 13.2315 12.3335C12.7747 12.7513 12.361 13.2139 11.9965 13.7144C12.9634 15.1619 13.6158 16.7965 13.9115 18.5124C14.3815 17.0915 14.8716 16.0108 15.7616 15.1803C17.9417 13.179 21.1868 13.4692 21.2618 13.4792C21.7644 13.5316 22.2672 13.3821 22.6597 13.0636C23.0521 12.745 23.302 12.2835 23.3544 11.7806C23.4067 11.2777 23.2573 10.7746 22.939 10.382C22.6206 9.98929 22.1594 9.73925 21.6568 9.68683ZM22.0518 12.1884C21.9583 12.284 21.8435 12.356 21.7168 12.3985C21.6257 12.4325 21.5291 12.4495 21.4318 12.4486C21.2213 12.4528 21.0162 12.3814 20.8538 12.2472C20.6914 12.1131 20.5825 11.9251 20.5468 11.7175C20.5111 11.5098 20.551 11.2962 20.6592 11.1155C20.7675 10.9348 20.9369 10.7989 21.1368 10.7325C21.2279 10.6985 21.3245 10.6815 21.4218 10.6825C21.5381 10.6815 21.6534 10.7041 21.7608 10.7488C21.8682 10.7935 21.9655 10.8594 22.0468 10.9426C22.1298 11.0231 22.1956 11.1195 22.2403 11.2262C22.285 11.3328 22.3076 11.4474 22.3068 11.563C22.3106 11.6801 22.2898 11.7966 22.2459 11.9052C22.202 12.0137 22.1359 12.1119 22.0518 12.1934V12.1884Z"
+                    fill="url(#paint3_linear_174_354)"
+                />
+                <defs>
+                    <linearGradient
+                        id="paint0_linear_174_354"
+                        x1="12.2064"
+                        y1="0.831529"
+                        x2="15.37"
+                        y2="10.9768"
+                        gradientUnits="userSpaceOnUse"
+                    >
+                        <stop stopColor="#5D7DFB" />
+                        <stop offset="1" stopColor="#4539E5" />
+                    </linearGradient>
+                    <linearGradient
+                        id="paint1_linear_174_354"
+                        x1="9.17136"
+                        y1="23.2906"
+                        x2="9.17136"
+                        y2="11.9185"
+                        gradientUnits="userSpaceOnUse"
+                    >
+                        <stop stopColor="#5D7DFB" />
+                        <stop offset="1" stopColor="#4539E5" />
+                    </linearGradient>
+                    <linearGradient
+                        id="paint2_linear_174_354"
+                        x1="-0.0889928"
+                        y1="9.11673"
+                        x2="11.2714"
+                        y2="9.11673"
+                        gradientUnits="userSpaceOnUse"
+                    >
+                        <stop stopColor="#5D7DFB" />
+                        <stop offset="1" stopColor="#4539E5" />
+                    </linearGradient>
+                    <linearGradient
+                        id="paint3_linear_174_354"
+                        x1="11.9965"
+                        y1="14.0796"
+                        x2="23.3569"
+                        y2="14.0796"
+                        gradientUnits="userSpaceOnUse"
+                    >
+                        <stop stopColor="#4539E5" />
+                        <stop offset="1" stopColor="#5D7DFB" />
+                    </linearGradient>
+                </defs>
+            </svg>
+        </div>
+    );
+};
+
+export default FlareLogo;