add loading animation

This commit is contained in:
smanylov
2026-02-06 11:13:13 +07:00
parent 963b649aac
commit 6d9710e7cd
5 changed files with 62 additions and 7 deletions
+25
View File
@@ -3836,4 +3836,29 @@
font-size: 12px;
}
}
}
.loading-animation {
display: block;
text-align: center;
.global-spinner {
width: 24px;
height: 24px;
margin: 0 auto;
position: relative;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 4px solid #e5e7eb;
border-top: 4px solid #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
}
}
}
+12 -2
View File
@@ -96,8 +96,18 @@ export default function LoginForm() {
{t('forgot-password')}?
</a>
</div>
<button type="submit" className={`${styles['btn']}`}>
{t('sign-in')}
<button
type="submit"
className={`${styles['btn']}`}
disabled={isPending}
>
{isPending ? (
<div className="loading-animation">
<div className="global-spinner"></div>
</div>
) : (
t("sign-in")
)}
</button>
</form>
)
+12 -2
View File
@@ -432,8 +432,18 @@ export default function RegisterForm() {
{t(formState?.error?.server)}
</p>
)}
<button type="submit" className={`${styles['btn']}`}>
{t('create-an-account')}
<button
type="submit"
className={`${styles['btn']}`}
disabled={isPending}
>
{isPending ? (
<div className="loading-animation">
<div className="global-spinner"></div>
</div>
) : (
t("create-an-account")
)}
</button>
</form >
</>
@@ -304,8 +304,18 @@ export function CompanyUsersSettingPanel() {
</p>
)}
<button type="submit" className="btn btn-primary">
Добавить пользователя
<button
type="submit"
className={`${styles['btn']}`}
disabled={isPending}
>
{isPending ? (
<div className="loading-animation">
<div className="global-spinner"></div>
</div>
) : (
"Добавить пользователя"
)}
</button>
</form>
</div>