Spin and revert containers

Author: javizqh

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jderobot-ide-interface",
-  "version": "0.2.48",
+  "version": "0.2.49",
   "main": "dist/main.js",
   "typings": "dist/index.d.ts",
   "files": [

src/components/ResizableLayout/ResizableComponents.tsx

@@ -268,14 +268,14 @@ export const CollapsableResizableColumn = ({
 
   return (
     <StyledVertContiner bgColor={theme.palette?.background}>
-      <StyledVertFillerContiner bgColor={theme.palette?.background}>
-        {children[0]}
-      </StyledVertFillerContiner>
-      {children.slice(1, children.length).map((comp, i) => (
-        <ResizableVert key={`v-cont${i}`} height={100 / children.length} max={100} min={0} snap={[0]} top>
+      {children.slice(0, children.length - 1).map((comp, i) => (
+        <ResizableVert key={`v-cont${i}`} height={100 / children.length} max={100} min={0} snap={[0]}>
           {comp}
         </ResizableVert>
       ))}
+      <StyledVertFillerContiner bgColor={theme.palette?.background}>
+        {children[children.length - 1]}
+      </StyledVertFillerContiner>
     </StyledVertContiner>
   );
 };

src/components/StatusBar/StatusBar.style.tsx

@@ -81,7 +81,7 @@ const handleAnimation = (p: StyledStatusBarButtonProps) => {
   }
 };
 
-export const StyledStatusBarButton = styled.div<StyledStatusBarButtonProps>`
+export const StyledStatusBarButton = styled.button<StyledStatusBarButtonProps>`
   margin: 0 0 0 0;
   padding: 0 10px 0 10px;
   height: 24px;
@@ -114,5 +114,20 @@ export const StyledStatusBarButton = styled.div<StyledStatusBarButtonProps>`
     height: 24px;
     margin: 0 0 0 0;
   }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  #loading-spin {
+    animation: spin 2s linear infinite;
+    opacity: 50%;
+  }
+
   ${handleAnimation}
 `;

src/components/StatusBar/StatusBar.tsx

@@ -30,6 +30,7 @@ const StatusBar = ({
   extraComponents: StatusBarComponents;
 }) => {
   const theme = useTheme();
+  const [loading, setLoading] = useState<boolean>(false);
   const [dockerData, setDockerData] = useState<any>(
     commsManager?.getHostData()
   );
@@ -54,6 +55,10 @@ const StatusBar = ({
     if (e.detail.state == states.IDLE) {
       setDockerData(undefined);
       connectWithRetry();
+    } else {
+      if (loading) {
+        setLoading(false)
+      }
     }
   };
 
@@ -91,12 +96,17 @@ const StatusBar = ({
           id={`connect-with-rb`}
           onClick={() => {
             if (state === undefined || state === "idle") {
-              connectManager();
+              setLoading(true);
+              connectManager(states.CONNECTED, () => {
+                setLoading(false);
+                close();
+              });
             }
           }}
           title="Connect to the Robotics Backend"
+          disabled={loading}
         >
-          <ResetIcon viewBox="0 0 20 20" stroke={theme.palette.darkText} />
+          <ResetIcon viewBox="0 0 20 20" stroke={theme.palette.darkText} id={loading ? "loading-spin" : "loading"}/>
           <label>{`Connect${state === undefined || state === "idle" ? "" : "ing ..."}`}</label>
         </StyledStatusBarButton>
       )}