remove loading progress

src/components/LoadingBar.jsx

@@ -0,0 +1,11 @@
+const LoadingBar = () => (
+  <div className='w-full mb-4'>
+    <div className='animate-pulse flex'>
+      <div className='flex-1'>
+        <div className='h-1 bg-secondary' />
+      </div>
+    </div>
+  </div>
+)
+
+export default LoadingBar

src/components/index.js

@@ -17,3 +17,4 @@ export { default as TotalsReportBoxes } from './TotalsReportBoxes'
 export { default as Billing } from './Billing'
 export { default as BannerPaid } from './BannerPaid'
 export * from './ui'
+export { default as LoadingBar } from './LoadingBar'

src/components/ui/Button.jsx

@@ -47,7 +47,30 @@ export const buttonVariants = cva(
   }
 )
 
-const Button = forwardRef(({ className, variant, size, disabled, to, asChild = false, ...props }, ref) => {
+const Loading = () => (
+  <svg
+    className='animate-spin -ml-1 mr-3 h-5 w-5 text-white' xmlns='http://www.w3.org/2000/svg' fill='none'
+    viewBox='0 0 24 24'
+  >
+    <circle className='opacity-25' cx='12' cy='12' r='10' stroke='currentColor' stroke-width='4' />
+    <path
+      className='opacity-75' fill='currentColor'
+      d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
+    />
+  </svg>
+)
+
+const Button = forwardRef(({
+  className,
+  variant,
+  size,
+  disabled,
+  to,
+  asChild = false,
+  isLoading = false,
+  children,
+  ...props
+}, ref) => {
   const Comp = asChild ? Slot : 'button'
   const Link = to ? RouterLink : Fragment
 
@@ -68,7 +91,10 @@ const Button = forwardRef(({ className, variant, size, disabled, to, asChild = f
       ref={ref}
       disabled={disabled}
       {...props}
-    />
+    >
+      {isLoading && <Loading />}
+      {children}
+    </Comp>
   )
 })
 

src/pages/Login/components/AuthLayout/Auth.jsx

@@ -1,13 +1,14 @@
 import { Suspense, memo } from 'react'
 import PropTypes from 'prop-types'
-import { LinearProgress } from '@mui/material'
+
+import { LoadingBar } from 'components'
 import TopBar from './TopBar'
 
 const Auth = ({ children }) => (
   <div className='flex flex-col h-screen'>
     <TopBar />
     <main className='flex-1'>
-      <Suspense fallback={<LinearProgress />}>
+      <Suspense fallback={<LoadingBar />}>
         {children}
       </Suspense>
     </main>

src/pages/Login/components/LoginForm/LoginForm.jsx

@@ -95,6 +95,7 @@ const LoginForm = memo(({ login, loginError, isLoading }) => {
         disabled={!username || !password || isLoading}
         size='full'
         onClick={handleSubmit}
+        isLoading={isLoading}
       >
         Entrar
       </Button>

src/pages/Login/components/LoginView.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types'
-import { LinearProgress } from '@mui/material'
 
 import GuestGuard from 'components/GuestGuard'
 import { useAuth } from 'hooks'
@@ -10,12 +9,6 @@ import LoginForm from './LoginForm'
 const LoginView = () => {
   const { loginError, login, isLoading } = useAuth()
 
-  /**
-   * Render loading bar
-   * @returns {JSX.Element}
-   */
-  const renderLoadingBar = () => isLoading && <LinearProgress />
-
   return (
     <GuestGuard>
       <AuthLayout>
@@ -24,13 +17,10 @@ const LoginView = () => {
             <div className='h-full bg-[url("/static/images/auth.png")] bg-cover bg-center' />
           </div>
           <div className='lg:col-span-7 col-span-1'>
-            <div className='h-full flex'>
+            <div className='h-full flex flex-col'>
               <div className='flex flex-grow items-center'>
                 <LoginForm login={login} loginError={loginError} isLoading={isLoading} />
               </div>
-              <div className='text-center'>
-                {renderLoadingBar()}
-              </div>
             </div>
           </div>
         </div>