fixup! front: update stdcm simulation progress button design

Author: SharglutDev

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

@@ -7,7 +7,6 @@ import { compact } from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
-import { LOADER_HEIGHT } from 'applications/stdcm/consts';
 import { useOsrdConfActions, useOsrdConfSelectors } from 'common/osrdContext';
 import useInfraStatus from 'modules/pathfinding/hooks/useInfraStatus';
 import { Map } from 'modules/trainschedule/components/ManageTrainSchedule';
@@ -20,7 +19,7 @@ import StdcmDestination from './StdcmDestination';
 import StdcmLinkedPathSearch from './StdcmLinkedPathSearch';
 import StdcmOrigin from './StdcmOrigin';
 import useStaticPathfinding from '../../hooks/useStaticPathfinding';
-import type { LoaderStatus, StdcmConfigErrors } from '../../types';
+import type { StdcmConfigErrors } from '../../types';
 import StdcmSimulationParams from '../StdcmSimulationParams';
 import StdcmVias from './StdcmVias';
 import { ArrivalTimeTypes, StdcmConfigErrorTypes } from '../../types';
@@ -79,23 +78,9 @@ const StdcmConfig = ({
   const pathfinding = useStaticPathfinding(infra);
 
   const [formErrors, setFormErrors] = useState<StdcmConfigErrors>();
-  const [loaderStatus, setLoaderStatus] = useState<LoaderStatus>();
 
   const disabled = isPending || retainedSimulationIndex > -1;
 
-  useEffect(() => {
-    if (!isPending || !launchButtonRef.current) {
-      setLoaderStatus(undefined);
-    } else {
-      const { top } = launchButtonRef.current.getBoundingClientRect();
-      const windowHeight = window.innerHeight;
-      setLoaderStatus({
-        status: windowHeight - top - 32 > LOADER_HEIGHT ? 'absolute' : 'fixedBottom',
-        firstLaunch: true,
-      });
-    }
-  }, [isPending]);
-
   const startSimulation = () => {
     const isPathfindingFailed = !!pathfinding && pathfinding.status !== 'success';
     const formErrorsStatus = checkStdcmConfigErrors(
@@ -212,11 +197,9 @@ const StdcmConfig = ({
                 )}
               </div>
 
-              {loaderStatus && (
+              {isPending && (
                 <StdcmLoader
                   cancelStdcmRequest={cancelStdcmRequest}
-                  loaderStatus={loaderStatus}
-                  setLoaderStatus={setLoaderStatus}
                   launchButtonRef={launchButtonRef}
                 />
               )}

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

@@ -1,32 +1,33 @@
-import { useEffect, useRef, type RefObject } from 'react';
+import { useEffect, useRef, useState, type RefObject } from 'react';
 
 import { Button } from '@osrd-project/ui-core';
 import cx from 'classnames';
 import { useTranslation } from 'react-i18next';
 
-import { LOADER_HEIGHT } from '../consts';
 import type { LoaderStatus } from '../types';
 
+const LOADER_HEIGHT = 176;
 const LOADER_BOTTOM_OFFSET = 32;
 const FORM_TOP_OFFSET = 120 + 68; // navbar + prev path heights
 const LAUNCH_BUTTON_HEIGHT = 40;
 
 type StdcmLoaderProps = {
   cancelStdcmRequest: () => void;
-  loaderStatus: LoaderStatus;
-  setLoaderStatus: (loaderStatus?: LoaderStatus) => void;
   launchButtonRef: RefObject<HTMLDivElement>;
 };
 
-const StdcmLoader = ({
-  cancelStdcmRequest,
-  loaderStatus,
-  setLoaderStatus,
-  launchButtonRef,
-}: StdcmLoaderProps) => {
+const StdcmLoader = ({ cancelStdcmRequest, launchButtonRef }: StdcmLoaderProps) => {
   const { t } = useTranslation('stdcm');
   const loaderRef = useRef<HTMLDivElement>(null);
 
+  const { top } = launchButtonRef.current!.getBoundingClientRect();
+  const windowHeight = window.innerHeight;
+
+  const [loaderStatus, setLoaderStatus] = useState<LoaderStatus>({
+    status: windowHeight - top - 32 > LOADER_HEIGHT ? 'absolute' : 'fixedBottom',
+    firstLaunch: true,
+  });
+
   useEffect(() => {
     // Depending on the scroll, change the position of the loader between fixed, sticky or absolute
     const handleScroll = () => {

front/src/applications/stdcm/consts.ts

@@ -22,5 +22,3 @@ export const COMPOSITION_CODES = [
 ];
 
 export const DEFAULT_TOLERANCE = 1800; // 30min
-
-export const LOADER_HEIGHT = 176;