feat: move loading circle into the button | [AntonioMrtz#261]

gigigimay · Oct 18, 2024 · 4f52b01 · 4f52b01
1 parent fbef7d6
commit 4f52b01
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 39 deletions.
diff --git a/Electron/src/components/AdvancedUIComponents/LoadingCircle/LoadingCircleSmall.tsx b/Electron/src/components/AdvancedUIComponents/LoadingCircle/LoadingCircleSmall.tsx
@@ -0,0 +1,17 @@
+import CircularProgress from '@mui/material/CircularProgress/';
+
+export default function LoadingCircleSmall() {
+  return (
+    <CircularProgress
+      style={{ width: '1rem', height: 'auto', margin: 'auto 0.5rem' }}
+      sx={{
+        ' & .MuiCircularProgress-circle': {
+          color: 'var(--pure-white)',
+        },
+        '& .css-zk81sn-MuiCircularProgress-root': {
+          width: '3rem',
+        },
+      }}
+    />
+  );
+}
diff --git a/Electron/src/components/AdvancedUIComponents/LoadingCircle/LoadingCircleSmallNoPadding.tsx b/Electron/src/components/AdvancedUIComponents/LoadingCircle/LoadingCircleSmallNoPadding.tsx
diff --git a/Electron/src/components/Sidebar/ModalAddSongPlaylist/Accordion/AddSongPlayListAccordion.tsx b/Electron/src/components/Sidebar/ModalAddSongPlaylist/Accordion/AddSongPlayListAccordion.tsx
@@ -10,7 +10,7 @@ import { getTokenRole } from 'utils/token';
 import { InfoPopoverType } from 'components/AdvancedUIComponents/InfoPopOver/types/InfoPopover';
 import ConfirmationModal from 'components/AdvancedUIComponents/InfoPopOver/InfoPopover';
 import UserType from 'utils/role';
-import LoadingCircleSmall from 'components/AdvancedUIComponents/LoadingCircle/LoadingCircleSmallNoPadding';
+import LoadingCircleSmall from 'components/AdvancedUIComponents/LoadingCircle/LoadingCircleSmall';
 import { getGenreFromString } from 'utils/genre';
 import GenreOption from './GenreOption/GenreOption';
 import styles from './addSongPlayListAccordion.module.css';

diff --git a/Electron/src/pages/StartMenu/RegisterMenu.tsx b/Electron/src/pages/StartMenu/RegisterMenu.tsx
@@ -6,7 +6,7 @@ import {
 } from 'components/AdvancedUIComponents/InfoPopOver/types/InfoPopover';
 import timeout from 'utils/timeout';
 import Global from 'global/global';
-import LoadingCircle from 'components/AdvancedUIComponents/LoadingCircle/LoadingCircle';
+import LoadingCircleSmall from 'components/AdvancedUIComponents/LoadingCircle/LoadingCircleSmall';
 import { CancelablePromise } from 'swagger/api';
 import styles from './startMenu.module.css';
 import SpotifyElectronLogo from '../../assets/imgs/SpotifyElectronLogo.png';
@@ -145,11 +145,6 @@ export default function RegisterMenu({ setIsSigningUp }: PropsRegisterMenu) {
 
   return (
     <div className={`${styles.mainModalContainer}`}>
-      {loading && (
-        <div className={`${styles.loadingCircleWrapper}`}>
-          <LoadingCircle />
-        </div>
-      )}
       <div className={`${styles.contentWrapper}`}>
         <div className={`d-flex flex-row ${styles.titleContainer}`}>
           <img
@@ -242,7 +237,7 @@ export default function RegisterMenu({ setIsSigningUp }: PropsRegisterMenu) {
             disabled={loading}
             onClick={handleRegister}
           >
-            Registrar
+            Registrar {loading && <LoadingCircleSmall />}
           </button>
         </form>
 

diff --git a/Electron/src/pages/StartMenu/StartMenu.tsx b/Electron/src/pages/StartMenu/StartMenu.tsx
@@ -11,6 +11,7 @@ import timeout from 'utils/timeout';
 import LoadingCircle from 'components/AdvancedUIComponents/LoadingCircle/LoadingCircle';
 import Global from 'global/global';
 import { CancelablePromise } from 'swagger/api';
+import LoadingCircleSmall from 'components/AdvancedUIComponents/LoadingCircle/LoadingCircleSmall';
 import styles from './startMenu.module.css';
 import SpotifyElectronLogo from '../../assets/imgs/SpotifyElectronLogo.png';
 import { LoginService } from '../../swagger/api/services/LoginService';
@@ -150,11 +151,7 @@ export default function StartMenu({
 
   return (
     <div className={`${styles.mainModalContainer}`}>
-      {(autoLoginLoading || loginLoading) && (
-        <div className={`${styles.loadingCircleWrapper}`}>
-          <LoadingCircle />
-        </div>
-      )}
+      {autoLoginLoading && <LoadingCircle />}
       {!autoLoginLoading && (
         <div className={`${styles.contentWrapper}`}>
           <div className={`d-flex flex-row ${styles.titleContainer}`}>
@@ -210,6 +207,7 @@ export default function StartMenu({
               disabled={loginLoading}
             >
               Iniciar sesión
+              {loginLoading && <LoadingCircleSmall />}
             </button>
           </form>
 

diff --git a/Electron/src/pages/StartMenu/startMenu.module.css b/Electron/src/pages/StartMenu/startMenu.module.css
@@ -106,12 +106,18 @@
   padding: 8px;
   margin-top: 16px;
   font-weight: 700;
+  display: flex;
+  justify-content: center;
 }
 
 .loginButton:hover {
   transform: scale(1.08);
 }
 
+.loginButton:disabled {
+  transform: none;
+}
+
 .registerButton {
   border-radius: 999px;
   background-color: var(--app-logo-color-darker);
@@ -121,12 +127,18 @@
   padding: 8px;
   margin-top: 16px;
   font-weight: 700;
+  display: flex;
+  justify-content: center;
 }
 
 .registerButton:hover {
   transform: scale(1.04);
 }
 
+.registerButton:disabled {
+  transform: none;
+}
+
 .wrapperRegisterText {
   font-weight: 400;
 }