Working loading icons

Author: javizqh

react_frontend/src/components/buttons/PlayPause.tsx

@@ -12,29 +12,31 @@ import React from "react";
 
 import PlayArrowRoundedIcon from "@mui/icons-material/PlayArrowRounded";
 import PauseRoundedIcon from "@mui/icons-material/PauseRounded";
+import SyncRoundedIcon from "@mui/icons-material/SyncRounded";
 
 const PlayPauseButton = ({
   project,
   language,
-  appRunning,
-  setAppRunning,
   dlModel,
   hasDLModel,
   connectManager,
 }: {
   project: string;
   language?: string;
-  appRunning: boolean;
-  setAppRunning: (running: boolean) => void;
   dlModel: ArrayBuffer | undefined;
   hasDLModel: boolean;
-  connectManager: (desiredState?: string, callback?: () => void) => Promise<void>;
+  connectManager: (
+    desiredState?: string,
+    callback?: () => void
+  ) => Promise<void>;
 }) => {
   const theme = useAcademyTheme();
   const exerciseContext = useExercise();
   const { warning, error, info, close } = useError();
   const codeRef = useRef("");
   const runningCodeRef = useRef("");
+  const [state, setState] = useState<string>(CommsManager.getInstance().getState());
+  const [loading, setLoading] = useState<boolean>(false);
   const isCodeUpdatedRef = useRef<boolean | undefined>(undefined);
   const [isCodeUpdated, _updateCode] = useState<boolean | undefined>(false);
 
@@ -43,28 +45,45 @@ const PlayPauseButton = ({
     _updateCode(data);
   };
 
+  const updateState = (e: any) => {
+    setState(e.detail.state);
+  };
+
   useEffect(() => {
     subscribe("autoSaveCompleted", () => {
       updateCode(true);
     });
+    subscribe("CommsManagerStateChange", updateState);
 
     return () => {
       unsubscribe("autoSaveCompleted", () => {});
+      unsubscribe("CommsManagerStateChange", () => {});
     };
   }, []);
 
   useEffect(() => {
     codeRef.current = exerciseContext.code;
   }, [exerciseContext]);
 
+  useEffect(() => {
+    if (state === states.RUNNING || state === states.PAUSED) {
+      setLoading(false);
+    }
+  }, [state]);
+
   // App handling
 
   const onAppStateChange = async (save?: boolean) => {
+
     const manager = CommsManager.getInstance();
+    setLoading(true);
 
     if (manager.getState() === states.IDLE) {
-      info("Connecting with the Robotics Backend ...")
-      connectManager(states.TOOLS_READY, () => {onAppStateChange(); close()});
+      info("Connecting with the Robotics Backend ...");
+      connectManager(states.TOOLS_READY, () => {
+        onAppStateChange();
+        close();
+      });
       return;
     }
 
@@ -77,13 +96,13 @@ const PlayPauseButton = ({
       warning(
         "Failed to found a running simulation. Please make sure an universe is selected."
       );
+      setLoading(false);
       return;
     }
 
-    if (appRunning) {
+    if (state === states.RUNNING) {
       try {
         await manager.pause();
-        setAppRunning(false);
         console.log("App paused correctly!");
         return;
       } catch (e: unknown) {
@@ -108,7 +127,6 @@ const PlayPauseButton = ({
       runningCodeRef.current === codeRef.current
     ) {
       await manager.resume();
-      setAppRunning(true);
       console.log("App resumed correctly!");
       return;
     }
@@ -125,7 +143,6 @@ const PlayPauseButton = ({
       } else {
         commonsZip = zip;
       }
-      
 
       const extraFiles: { name: string; content: string }[] =
         await getProjectExtraFiles(project, language ? language : "python");
@@ -166,9 +183,9 @@ const PlayPauseButton = ({
         reader.readAsDataURL(content);
       });
 
-      setAppRunning(true);
       console.log("App started successfully");
     } catch (e: unknown) {
+      setLoading(false);
       if (e instanceof Error) {
         console.error("Error running app: " + e.message);
         error("Error running app: " + e.message);
@@ -177,20 +194,29 @@ const PlayPauseButton = ({
   };
 
   return (
-    <StyledHeaderButton
-      bgColor={theme.palette.primary}
-      hoverColor={theme.palette.secondary}
-      roundness={theme.roundness}
-      id="run-app"
-      onClick={() => onAppStateChange(undefined)}
-      title="Run app"
-    >
-      {appRunning ? (
-        <PauseRoundedIcon htmlColor={theme.palette.text} />
-      ) : (
-        <PlayArrowRoundedIcon htmlColor={theme.palette.text} />
-      )}
-    </StyledHeaderButton>
+    <>
+      <StyledHeaderButton
+        bgColor={theme.palette.primary}
+        hoverColor={theme.palette.secondary}
+        roundness={theme.roundness}
+        id="run-app"
+        onClick={() => onAppStateChange(undefined)}
+        title="Run app"
+        disabled={loading}
+      >
+        {loading ? (
+          <SyncRoundedIcon htmlColor={theme.palette.text} id="loading-spin" />
+        ) : (
+          <>
+            {state === states.RUNNING ? (
+              <PauseRoundedIcon htmlColor={theme.palette.text} />
+            ) : (
+              <PlayArrowRoundedIcon htmlColor={theme.palette.text} />
+            )}
+          </>
+        )}
+      </StyledHeaderButton>
+    </>
   );
 };
 

react_frontend/src/components/buttons/Reset.tsx

@@ -1,25 +1,46 @@
 import { StyledHeaderButton } from "Styles/headers/HeaderMenu.styles";
 import { useError } from "jderobot-ide-interface";
-import { CommsManager } from "jderobot-commsmanager";
+import { CommsManager, events, states } from "jderobot-commsmanager";
 import ReplayRoundedIcon from "@mui/icons-material/ReplayRounded";
 import { useAcademyTheme } from "Contexts/AcademyThemeContext";
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { subscribe, unsubscribe } from "Helpers/utils";
+import SyncRoundedIcon from "@mui/icons-material/SyncRounded";
 
-const ResetButton = ({
-  setAppRunning,
-}: {
-  setAppRunning: (running: boolean) => void;
-}) => {
+const ResetButton = ({}: {}) => {
   const theme = useAcademyTheme();
   const { warning } = useError();
 
+  const [state, setState] = useState<string>(
+    CommsManager.getInstance().getState()
+  );
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const updateState = (e: any) => {
+    setState(e.detail.state);
+  };
+
+  useEffect(() => {
+    subscribe("CommsManagerStateChange", updateState);
+
+    return () => {
+      unsubscribe("CommsManagerStateChange", () => {});
+    };
+  }, []);
+
+  useEffect(() => {
+    if (state === states.TOOLS_READY) {
+      setLoading(false);
+    }
+  }, [state]);
+
   const onResetApp = async () => {
     const manager = CommsManager.getInstance();
 
     if (
-      manager.getState() !== "tools_ready" &&
-      manager.getState() !== "application_running" &&
-      manager.getState() !== "paused"
+      state === states.CONNECTED ||
+      state === states.IDLE ||
+      state === states.WORLD_READY
     ) {
       console.error("Simulation is not ready!");
       warning(
@@ -28,9 +49,10 @@ const ResetButton = ({
       return;
     }
 
+    setLoading(true);
+
     await manager.terminateApplication();
     console.log("App reseted!");
-    setAppRunning(false);
   };
 
   return (
@@ -42,7 +64,11 @@ const ResetButton = ({
       onClick={onResetApp}
       title="Reset app"
     >
-      <ReplayRoundedIcon htmlColor={theme.palette.text} />
+      {loading ? (
+        <SyncRoundedIcon htmlColor={theme.palette.text} id="loading-spin" />
+      ) : (
+        <ReplayRoundedIcon htmlColor={theme.palette.text} />
+      )}
     </StyledHeaderButton>
   );
 };

react_frontend/src/styles/headers/HeaderMenu.styles.ts

@@ -69,6 +69,20 @@ export const StyledHeaderButton = styled.button<StyledHeaderButtonProps>`
     width: 24px;
     height: 24px;
   }
+
+  @keyframes spin {
+    from {
+      transform: rotate(360deg);
+    }
+    to {
+      transform: rotate(0deg);
+    }
+  }
+
+  #loading-spin {
+    animation: spin 2s linear infinite;
+    opacity: 50%;
+  }
 `;
 
 interface StyledDropdownProps {