[frontend] fix skeleton loading for simulations in scenario overview (#…

…1892)
OpenBAS-Platform · Nov 20, 2024 · fe2e9ed · fe2e9ed
1 parent 64c245b
commit fe2e9ed
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/openbas-front/src/admin/components/scenarios/scenario/Scenario.tsx b/openbas-front/src/admin/components/scenarios/scenario/Scenario.tsx
@@ -27,7 +27,7 @@ import type { Theme } from '../../../../components/Theme';
 import octiDark from '../../../../static/images/xtm/octi_dark.png';
 import octiLight from '../../../../static/images/xtm/octi_light.png';
 import { useHelper } from '../../../../store';
-import type { KillChainPhase } from '../../../../utils/api-types';
+import type { KillChainPhase, SearchPaginationInput } from '../../../../utils/api-types';
 import { useAppDispatch } from '../../../../utils/hooks';
 import useDataLoader from '../../../../utils/hooks/useDataLoader';
 import { isEmptyField } from '../../../../utils/utils';
@@ -80,10 +80,17 @@ const Scenario = ({ setOpenInstantiateSimulationAndStart }: { setOpenInstantiate
   const sortByOrder = R.sortWith([R.ascend(R.prop('phase_order'))]);
 
   // Exercises
+  const [loadingExercises, setLoadingExercises] = useState(true);
   const [exercises, setExercises] = useState<EndpointStore[]>([]);
   const { queryableHelpers, searchPaginationInput } = useQueryableWithLocalStorage(`scenario-${scenarioId}-simulations`, buildSearchPagination({
     sorts: initSorting('exercise_start_date'),
   }));
+  const search = (scenarioId: ScenarioStore['scenario_id'], input: SearchPaginationInput) => {
+    setLoadingExercises(true);
+    return searchScenarioExercises(scenarioId, input).finally(() => {
+      setLoadingExercises(false);
+    });
+  };
   const secondaryAction = (exercise: ExerciseStore) => (
     <ExercisePopover
       exercise={exercise}
@@ -223,7 +230,7 @@ const Scenario = ({ setOpenInstantiateSimulationAndStart }: { setOpenInstantiate
             </Typography>
             <Paper classes={{ root: classes.paper }} variant="outlined">
               <PaginationComponentV2
-                fetch={input => searchScenarioExercises(scenarioId, input)}
+                fetch={input => search(scenarioId, input)}
                 searchPaginationInput={searchPaginationInput}
                 setContent={setExercises}
                 entityPrefix="exercise"
@@ -235,7 +242,7 @@ const Scenario = ({ setOpenInstantiateSimulationAndStart }: { setOpenInstantiate
                 exercises={exercises}
                 queryableHelpers={queryableHelpers}
                 secondaryAction={secondaryAction}
-                loading={loadingScenarioExercises}
+                loading={loadingExercises}
               />
             </Paper>
           </Grid>