[frontend] avoid full reload of scenario & simulation when refetchin (#…

…1701)
OpenBAS-Platform · Oct 21, 2024 · 853e719 · 853e719
1 parent aece878
commit 853e719
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/openbas-front/src/admin/components/scenarios/scenario/Index.tsx b/openbas-front/src/admin/components/scenarios/scenario/Index.tsx
@@ -196,19 +196,24 @@ const IndexScenarioComponent: FunctionComponent<{ scenario: ScenarioStore }> = (
 const Index = () => {
   // Standard hooks
   const dispatch = useAppDispatch();
+  const [pristine, setPristine] = useState(true);
   const [loading, setLoading] = useState(true);
   const { t } = useFormatter();
   // Fetching data
   const { scenarioId } = useParams() as { scenarioId: ScenarioStore['scenario_id'] };
   const scenario = useHelper((helper: ScenariosHelper) => helper.getScenario(scenarioId));
   useDataLoader(() => {
     setLoading(true);
-    dispatch(fetchScenario(scenarioId)).finally(() => setLoading(false));
+    dispatch(fetchScenario(scenarioId)).finally(() => {
+      setPristine(false);
+      setLoading(false);
+    });
   });
 
   const scenarioInjectContext = injectContextForScenario(scenario);
 
-  if (loading) {
+  // avoid to show loader if something trigger useDataLoader
+  if (pristine && loading) {
     return <Loader />;
   }
   if (!loading && !scenario) {

diff --git a/openbas-front/src/admin/components/simulations/simulation/Index.tsx b/openbas-front/src/admin/components/simulations/simulation/Index.tsx
@@ -156,6 +156,7 @@ const IndexComponent: FunctionComponent<{ exercise: ExerciseType }> = ({
 
 const Index = () => {
   // Standard hooks
+  const [pristine, setPristine] = useState(true);
   const [loading, setLoading] = useState(true);
   const { t } = useFormatter();
   const dispatch = useAppDispatch();
@@ -164,12 +165,16 @@ const Index = () => {
   const exercise = useHelper((helper: ExercisesHelper) => helper.getExercise(exerciseId));
   useDataLoader(() => {
     setLoading(true);
-    dispatch(fetchExercise(exerciseId)).finally(() => setLoading(false));
+    dispatch(fetchExercise(exerciseId)).finally(() => {
+      setPristine(false);
+      setLoading(false);
+    });
   });
 
   const exerciseInjectContext = injectContextForExercise(exercise);
 
-  if (loading) {
+  // avoid to show loader if something trigger useDataLoader
+  if (pristine && loading) {
     return <Loader />;
   }
   if (!loading && !exercise) {