add loading animation

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "no-copy-frontend",
-	"version": "0.31.0",
+	"version": "0.32.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev -p 2999",

src/app/styles/pages-styles.scss

@@ -3837,3 +3837,28 @@
 		}
 	}
 }
+
+.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;
+		}
+	}
+}

src/app/ui/forms/login-form.tsx

@@ -96,8 +96,18 @@ export default function LoginForm() {
 					{t('forgot-password')}?
 				</a>
 			</div>
-			<button type="submit" className={`${styles['btn']}`}>
+			<button
-				{t('sign-in')}
+				type="submit"
+				className={`${styles['btn']}`}
+				disabled={isPending}
+			>
+				{isPending ? (
+					<div className="loading-animation">
+						<div className="global-spinner"></div>
+					</div>
+				) : (
+					t("sign-in")
+				)}
 			</button>
 		</form>
 	)

src/app/ui/forms/register-form.tsx

@@ -432,8 +432,18 @@ export default function RegisterForm() {
 						{t(formState?.error?.server)}
 					</p>
 				)}
-				<button type="submit" className={`${styles['btn']}`}>
+				<button
-					{t('create-an-account')}
+					type="submit"
+					className={`${styles['btn']}`}
+					disabled={isPending}
+				>
+					{isPending ? (
+						<div className="loading-animation">
+							<div className="global-spinner"></div>
+						</div>
+					) : (
+						t("create-an-account")
+					)}
 				</button>
 			</form >
 		</>

src/app/ui/settings/company-users-setting-panel.tsx

@@ -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>