animate progress button

OpenRailAssociation · Nov 21, 2024 · 63db8cf · 63db8cf
1 parent dd7d54f
commit 63db8cf
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 3 deletions.
diff --git a/front/src/applications/stdcm/components/StdcmForm/StdcmConfig.tsx b/front/src/applications/stdcm/components/StdcmForm/StdcmConfig.tsx
@@ -171,14 +171,18 @@ const StdcmConfig = ({
                 className="posterior-linked-path"
                 linkedOp={{ extremityType: 'origin', id: destination.id }}
               />
-              {isPending && <StdcmLoader cancelStdcmRequest={cancelStdcmRequest} />}
+
               <div
                 className={cx('stdcm-launch-request', {
                   'wizz-effect': pathfinding?.status !== 'success' || formErrors,
                 })}
               >
                 {showBtnToLaunchSimulation && (
-                  <Button label={t('simulation.getSimulation')} onClick={startSimulation} />
+                  <Button
+                    className={cx({ 'fade-out': isPending })}
+                    label={t('simulation.getSimulation')}
+                    onClick={startSimulation}
+                  />
                 )}
                 {formErrors && (
                   <StdcmWarningBox
@@ -188,6 +192,8 @@ const StdcmConfig = ({
                   />
                 )}
               </div>
+
+              {isPending && <StdcmLoader cancelStdcmRequest={cancelStdcmRequest} />}
             </div>
           </div>
         </div>

diff --git a/front/src/applications/stdcm/components/StdcmLoader.tsx b/front/src/applications/stdcm/components/StdcmLoader.tsx
@@ -1,13 +1,40 @@
+import { useEffect } from 'react';
+
 import { Button } from '@osrd-project/ui-core';
 import { useTranslation } from 'react-i18next';
 
+const LOADER_OFFSET = 32;
+
 type StdcmLoaderProps = {
   cancelStdcmRequest: () => void;
 };
 
 const StdcmLoader = ({ cancelStdcmRequest }: StdcmLoaderProps) => {
   const { t } = useTranslation('stdcm');
 
+  useEffect(() => {
+    // Depending on the scroll change the position of the loader between fixed and sticky
+    const handleScroll = () => {
+      const element = document.querySelector('.stdcm-loader') as HTMLElement;
+      const scrollTop = window.scrollY;
+
+      if (scrollTop > window.innerHeight - LOADER_OFFSET) {
+        element.style.position = 'fixed';
+        element.style.top = `${LOADER_OFFSET}px`;
+        element.style.bottom = 'unset';
+      } else {
+        element.style.position = 'sticky';
+        element.style.top = 'unset';
+        element.style.bottom = `${LOADER_OFFSET}px`;
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
   return (
     <div className="stdcm-loader">
       <div className="stdcm-loader__wrapper">

diff --git a/front/src/applications/stdcm/views/StdcmView.tsx b/front/src/applications/stdcm/views/StdcmView.tsx
@@ -18,6 +18,8 @@ import useStdcmEnvironment, { NO_CONFIG_FOUND_MSG } from '../hooks/useStdcmEnv';
 import useStdcmForm from '../hooks/useStdcmForm';
 import type { StdcmSimulation } from '../types';
 
+const LAUNCH_BUTTON_FADEOUT_DURATION = 500;
+
 const StdcmView = () => {
   // TODO : refacto. state useStdcm. Maybe we can merge some state together in order to reduce the number of refresh
   const currentSimulationInputs = useStdcmForm();
@@ -91,7 +93,9 @@ const StdcmView = () => {
 
   useEffect(() => {
     if (isPending && !isDebugMode) {
-      setShowBtnToLaunchSimulation(false);
+      setTimeout(() => {
+        setShowBtnToLaunchSimulation(false);
+      }, LAUNCH_BUTTON_FADEOUT_DURATION);
     }
   }, [isPending]);
 

diff --git a/front/src/styles/scss/applications/stdcm/_home.scss b/front/src/styles/scss/applications/stdcm/_home.scss
@@ -102,6 +102,11 @@
             justify-content: center;
             width: 100%;
             font-weight: 500;
+
+            &.fade-out {
+              opacity: 0;
+              transition: opacity 0.5s ease;
+            }
           }
 
           .stdcm-warning-buttons {

diff --git a/front/src/styles/scss/applications/stdcm/_loader.scss b/front/src/styles/scss/applications/stdcm/_loader.scss
@@ -1,6 +1,7 @@
 .stdcm-loader {
   position: sticky;
   bottom: 32px;
+  z-index: 2;
   padding: 16px 16px 18px;
   border-radius: 24px;
   background-color: var(--white100);
@@ -9,6 +10,18 @@
     0px 6px 21px -5px rgba(24, 68, 239, 0.26),
     0px 16px 30px -5px rgba(0, 0, 0, 0.16),
     0px 3px 5px -2px rgba(0, 0, 0, 0.1);
+  animation: slideUp 0.8s ease-in-out;
+
+  @keyframes slideUp {
+    0% {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
 
   .stdcm-loader__wrapper {
     display: flex;
@@ -23,6 +36,17 @@
       font-weight: 400;
       line-height: 32px;
       margin-block: 15px 0;
+      animation: fade 1.6s infinite;
+    }
+
+    @keyframes fade {
+      0%,
+      100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.25;
+      }
     }
   }