fixup! front: update stdcm simulation progress button design

Author: SharglutDev

front/src/applications/stdcm/components/StdcmForm/StdcmConfig.tsx

@@ -90,7 +90,7 @@ const StdcmConfig = ({
       const { top } = launchButtonRef.current.getBoundingClientRect();
       const windowHeight = window.innerHeight;
       setLoaderStatus({
-        status: windowHeight - top - 32 > LOADER_HEIGHT ? 'absolute' : 'sticky',
+        status: windowHeight - top - 32 > LOADER_HEIGHT ? 'absolute' : 'fixedBottom',
         firstLaunch: true,
       });
     }
@@ -197,7 +197,7 @@ const StdcmConfig = ({
                 <Button
                   data-testid="launch-simulation-button"
                   className={cx({
-                    'fade-out': isPending || !showBtnToLaunchSimulation,
+                    'fade-out': !showBtnToLaunchSimulation,
                   })}
                   label={t('simulation.getSimulation')}
                   onClick={startSimulation}

front/src/applications/stdcm/components/StdcmLoader.tsx

@@ -38,33 +38,32 @@ const StdcmLoader = ({
         innerHeight - launchButtonRef.current.getBoundingClientRect().top >
         LOADER_HEIGHT + LOADER_BOTTOM_OFFSET;
 
-      if (launchButtonRef.current && isLoaderFitting) {
+      // Loader doesn't fit between the bottom of the form and bottom of the viewport
+      if (!isLoaderFitting) {
         setLoaderStatus({
           firstLaunch: false,
-          status: 'absolute',
-        });
-      } else {
-        setLoaderStatus({
-          firstLaunch: false,
-          status: 'sticky',
+          status: 'fixedBottom',
         });
+        return;
       }
 
       const currentFormHeight = loaderRef.current.parentElement!.clientHeight;
       const shouldLoaderStickTop =
         scrollY > currentFormHeight + FORM_TOP_OFFSET - LAUNCH_BUTTON_HEIGHT;
 
+      // Loader reaches the top of the screen minus its top offset
       if (shouldLoaderStickTop) {
         setLoaderStatus({
           firstLaunch: false,
-          status: 'fixed',
-        });
-      } else if (loaderStatus.status === 'fixed') {
-        setLoaderStatus({
-          firstLaunch: false,
-          status: 'absolute',
+          status: 'fixedTop',
         });
+        return;
       }
+
+      setLoaderStatus({
+        firstLaunch: false,
+        status: 'absolute',
+      });
     };
 
     window.addEventListener('scroll', handleScroll);
@@ -77,11 +76,11 @@ const StdcmLoader = ({
     <div
       ref={loaderRef}
       className={cx(`stdcm-loader`, {
-        fixed: loaderStatus.status === 'fixed',
+        'fixed-top': loaderStatus.status === 'fixedTop',
         absolute: loaderStatus.status === 'absolute',
         'with-fade-in-animation': loaderStatus.status === 'absolute' && loaderStatus.firstLaunch,
-        sticky: loaderStatus.status === 'sticky',
-        'with-slide-animation': loaderStatus.status === 'sticky' && loaderStatus.firstLaunch,
+        'fixed-bottom': loaderStatus.status === 'fixedBottom',
+        'with-slide-animation': loaderStatus.status === 'fixedBottom' && loaderStatus.firstLaunch,
       })}
     >
       <div className="stdcm-loader__wrapper">

front/src/applications/stdcm/types.ts

@@ -202,6 +202,6 @@ export type StdcmLinkedPathResult = {
 export type ExtremityPathStepType = 'origin' | 'destination';
 
 export type LoaderStatus = {
-  status: 'fixed' | 'sticky' | 'absolute';
+  status: 'fixedBottom' | 'fixedTop' | 'absolute';
   firstLaunch: boolean;
 };

front/src/applications/stdcm/views/StdcmView.tsx

@@ -18,8 +18,6 @@ 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();
@@ -93,9 +91,7 @@ const StdcmView = () => {
 
   useEffect(() => {
     if (isPending && !isDebugMode) {
-      setTimeout(() => {
-        setShowBtnToLaunchSimulation(false);
-      }, LAUNCH_BUTTON_FADEOUT_DURATION);
+      setShowBtnToLaunchSimulation(false);
     }
   }, [isPending]);
 

front/src/styles/scss/applications/stdcm/_loader.scss

@@ -9,7 +9,7 @@
     0 16px 30px -5px rgba(0, 0, 0, 0.16),
     0 3px 5px -2px rgba(0, 0, 0, 0.1);
 
-  &.sticky {
+  &.fixed-bottom {
     position: fixed;
     bottom: 32px;
     top: unset;
@@ -28,7 +28,7 @@
     }
   }
 
-  &.fixed {
+  &.fixed-top {
     position: fixed;
     top: 32px;
     bottom: unset;
@@ -45,8 +45,6 @@
 
   @keyframes slideUp {
     0% {
-      // Le translate ne doit se passer que si la popup ne rentre pas dans l'espace restant
-      // La map ne doit jamais bouger quand le formulaire grandit ou retrécit ?
       transform: translateY(100%);
       opacity: 0;
     }