From a3560ee845cce5bf80e9ad39d397e2d1b77f1a3b Mon Sep 17 00:00:00 2001
From: juancarmore <juancar_more2@hotmail.com>
Date: Wed, 2 Jul 2025 20:33:09 +0200
Subject: [PATCH] frontend: add loading state handling in DevelopersComponent

---
 .../developers/developers.component.html      | 255 ++++++++++--------
 .../developers/developers.component.ts        |  14 +-
 .../users-permissions.component.ts            |   2 +-
 3 files changed, 146 insertions(+), 125 deletions(-)

diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/developers/developers.component.html b/frontend/projects/shared-meet-components/src/lib/pages/console/developers/developers.component.html
index fec017f..3adff39 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/console/developers/developers.component.html
+++ b/frontend/projects/shared-meet-components/src/lib/pages/console/developers/developers.component.html
@@ -7,48 +7,65 @@
 		<p class="subtitle">Everyting you need to embed OpenVidu Meet in your applications.</p>
 	</div>
 
-	<div class="page-content">
-		<!-- API KEY Section -->
-		<mat-card class="section-card api-key-section">
-			<mat-card-header>
-				<div mat-card-avatar>
-					<mat-icon class="section-icon">vpn_key</mat-icon>
-				</div>
-				<mat-card-title>API KEY</mat-card-title>
-				<mat-card-subtitle>Generate and manage your API key for REST API access</mat-card-subtitle>
-			</mat-card-header>
-
-			<mat-card-content>
-				@if (apiKeyData()) {
-					<div class="api-key-display">
-						<mat-form-field subscriptSizing="dynamic" appearance="outline" class="api-key-field">
-							<mat-label>API Key</mat-label>
-							<input
-								matInput
-								readonly
-								[type]="showApiKey() ? 'text' : 'password'"
-								[value]="apiKeyData()!.key"
-							/>
-							<button
-								mat-icon-button
-								matSuffix
-								(click)="toggleApiKeyVisibility()"
-								matTooltip="Toggle visibility"
-								class="toggle-visibility-button"
-							>
-								<mat-icon>{{ showApiKey() ? 'visibility_off' : 'visibility' }}</mat-icon>
-							</button>
-						</mat-form-field>
-
-						<div class="api-key-actions">
-							<button mat-button (click)="copyApiKey()" class="copy-button">
-								<mat-icon>content_copy</mat-icon>
-								Copy
-							</button>
-						</div>
+	@if (isLoading()) {
+		<div class="ov-page-loading">
+			<div class="loading-content">
+				<div class="loading-header">
+					<div class="loading-title">
+						<mat-icon class="ov-settings-icon loading-icon">settings</mat-icon>
+						<h1>Loading Settings</h1>
 					</div>
+					<p class="loading-subtitle">Please wait while we fetch your settings...</p>
+				</div>
 
-					<!-- <div class="api-key-info">
+				<div class="loading-spinner-container">
+					<mat-spinner diameter="48"></mat-spinner>
+				</div>
+			</div>
+		</div>
+	} @else {
+		<div class="page-content">
+			<!-- API KEY Section -->
+			<mat-card class="section-card api-key-section">
+				<mat-card-header>
+					<div mat-card-avatar>
+						<mat-icon class="section-icon">vpn_key</mat-icon>
+					</div>
+					<mat-card-title>API KEY</mat-card-title>
+					<mat-card-subtitle>Generate and manage your API key for REST API access</mat-card-subtitle>
+				</mat-card-header>
+
+				<mat-card-content>
+					@if (apiKeyData()) {
+						<div class="api-key-display">
+							<mat-form-field subscriptSizing="dynamic" appearance="outline" class="api-key-field">
+								<mat-label>API Key</mat-label>
+								<input
+									matInput
+									readonly
+									[type]="showApiKey() ? 'text' : 'password'"
+									[value]="apiKeyData()!.key"
+								/>
+								<button
+									mat-icon-button
+									matSuffix
+									(click)="toggleApiKeyVisibility()"
+									matTooltip="Toggle visibility"
+									class="toggle-visibility-button"
+								>
+									<mat-icon>{{ showApiKey() ? 'visibility_off' : 'visibility' }}</mat-icon>
+								</button>
+							</mat-form-field>
+
+							<div class="api-key-actions">
+								<button mat-button (click)="copyApiKey()" class="copy-button">
+									<mat-icon>content_copy</mat-icon>
+									Copy
+								</button>
+							</div>
+						</div>
+
+						<!-- <div class="api-key-info">
 						<p class="info-text">
 							<mat-icon class="info-icon">info</mat-icon>
 							Generated on: {{ apiKeyData()!.creationDate | date: 'medium' }}
@@ -58,71 +75,70 @@
 							Keep your API key secure. Do not share it publicly or expose it in client-side code.
 						</p>
 					</div> -->
-				} @else {
-					<div class="no-api-key">
-						<h3>No API Key Generated</h3>
-						<p>Generate an API key to access OpenVidu Meet REST API endpoints.</p>
-						<button mat-raised-button class (click)="generateApiKey()">
-							<mat-icon>vpn_key</mat-icon>
-							Generate API Key
+					} @else {
+						<div class="no-api-key">
+							<h3>No API Key Generated</h3>
+							<p>Generate an API key to access OpenVidu Meet REST API endpoints.</p>
+							<button mat-raised-button class (click)="generateApiKey()">
+								<mat-icon>vpn_key</mat-icon>
+								Generate API Key
+							</button>
+						</div>
+					}
+				</mat-card-content>
+
+				@if (apiKeyData()) {
+					<mat-card-actions>
+						<button mat-raised-button color="primary" (click)="regenerateApiKey()">
+							<mat-icon>refresh</mat-icon>
+							Regenerate Key
 						</button>
-					</div>
+						<button mat-stroked-button id="revoke-key-btn" (click)="revokeApiKey()">
+							<mat-icon>delete</mat-icon>
+							Revoke Key
+						</button>
+					</mat-card-actions>
 				}
-			</mat-card-content>
+			</mat-card>
 
-			@if (apiKeyData()) {
-				<mat-card-actions>
-					<button mat-raised-button color="primary" (click)="regenerateApiKey()">
-						<mat-icon>refresh</mat-icon>
-						Regenerate Key
-					</button>
-					<button mat-stroked-button id="revoke-key-btn" (click)="revokeApiKey()">
-						<mat-icon>delete</mat-icon>
-						Revoke Key
-					</button>
-				</mat-card-actions>
-			}
-		</mat-card>
-
-		<!-- WEBHOOKS Section -->
-		<mat-card class="section-card webhooks-section">
-			<mat-card-header>
-				<div mat-card-avatar>
-					<mat-icon class="section-icon">webhook</mat-icon>
-				</div>
-				<mat-card-title>WEBHOOKS</mat-card-title>
-				<mat-card-subtitle>Configure webhook notifications for real-time event updates</mat-card-subtitle>
-			</mat-card-header>
-
-			<mat-card-content class="ov-mt-sm">
-				<form [formGroup]="webhookForm" class="webhook-form">
-					<!-- Enable/Disable Toggle -->
-					<h4 class="webhook-section-title">Webhook Notifications</h4>
-					<div class="webhook-toggle ov-mt-xs">
-						<span>Enable webhook notifications</span>
-						<mat-slide-toggle formControlName="isEnabled"></mat-slide-toggle>
+			<!-- WEBHOOKS Section -->
+			<mat-card class="section-card webhooks-section">
+				<mat-card-header>
+					<div mat-card-avatar>
+						<mat-icon class="section-icon">webhook</mat-icon>
 					</div>
+					<mat-card-title>WEBHOOKS</mat-card-title>
+					<mat-card-subtitle>Configure webhook notifications for real-time event updates</mat-card-subtitle>
+				</mat-card-header>
 
-					<!-- Webhook URL -->
-					<h4 class="webhook-section-title">Webhook URL</h4>
-					<p class="webhook-description ov-mt-xs">
-						Enter the URL where you want to receive webhook notifications.
-					</p>
-					<mat-form-field appearance="outline" class="full-width">
-						<mat-label>Webhook URL</mat-label>
-						<input matInput formControlName="url" placeholder="https://your-server.com/webhook" />
-						<mat-icon matSuffix>link</mat-icon>
-						@if (webhookForm.get('url')?.hasError('required')) {
-							<mat-error>Webhook URL is required</mat-error>
-						}
-						@if (webhookForm.get('url')?.hasError('pattern')) {
-							<mat-error>Please enter a valid HTTP(S) URL</mat-error>
-						}
-					</mat-form-field>
+				<mat-card-content class="ov-mt-sm">
+					<form [formGroup]="webhookForm" class="webhook-form">
+						<!-- Enable/Disable Toggle -->
+						<h4 class="webhook-section-title">Webhook Notifications</h4>
+						<div class="webhook-toggle ov-mt-xs">
+							<span>Enable webhook notifications</span>
+							<mat-slide-toggle formControlName="isEnabled"></mat-slide-toggle>
+						</div>
 
+						<!-- Webhook URL -->
+						<h4 class="webhook-section-title">Webhook URL</h4>
+						<p class="webhook-description ov-mt-xs">
+							Enter the URL where you want to receive webhook notifications.
+						</p>
+						<mat-form-field appearance="outline" class="full-width">
+							<mat-label>Webhook URL</mat-label>
+							<input matInput formControlName="url" placeholder="https://your-server.com/webhook" />
+							<mat-icon matSuffix>link</mat-icon>
+							@if (webhookForm.get('url')?.hasError('required')) {
+								<mat-error>Webhook URL is required</mat-error>
+							}
+							@if (webhookForm.get('url')?.hasError('pattern')) {
+								<mat-error>Please enter a valid HTTP(S) URL</mat-error>
+							}
+						</mat-form-field>
 
-					<!-- Event Configuration -->
-					<!-- <div class="events-section">
+						<!-- Event Configuration -->
+						<!-- <div class="events-section">
 						<h4>Event Types</h4>
 						<p class="events-description">Choose which events should trigger webhook notifications</p>
 
@@ -158,24 +174,29 @@
 							</div>
 						</div>
 					</div> -->
-				</form>
-			</mat-card-content>
+					</form>
+				</mat-card-content>
 
-			<mat-card-actions>
-				<button
-					mat-raised-button
-					color="primary"
-					(click)="saveWebhookConfig()"
-					[disabled]="webhookForm.invalid"
-				>
-					<mat-icon>save</mat-icon>
-					Save Configuration
-				</button>
-				<button mat-stroked-button (click)="testWebhook()" [disabled]="!webhookForm.get('url')?.value">
-					<mat-icon>send</mat-icon>
-					Test Webhook
-				</button>
-			</mat-card-actions>
-		</mat-card>
-	</div>
+				<mat-card-actions>
+					<button
+						mat-raised-button
+						color="primary"
+						(click)="saveWebhookConfig()"
+						[disabled]="webhookForm.invalid"
+					>
+						<mat-icon>save</mat-icon>
+						Save Configuration
+					</button>
+					<button
+						mat-stroked-button
+						(click)="testWebhook()"
+						[disabled]="webhookForm.get('url')?.disabled || webhookForm.get('url')?.invalid"
+					>
+						<mat-icon>send</mat-icon>
+						Test Webhook
+					</button>
+				</mat-card-actions>
+			</mat-card>
+		</div>
+	}
 </div>
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/developers/developers.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/console/developers/developers.component.ts
index 6c519e1..63292da 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/console/developers/developers.component.ts
+++ b/frontend/projects/shared-meet-components/src/lib/pages/console/developers/developers.component.ts
@@ -1,15 +1,13 @@
 import { Clipboard } from '@angular/cdk/clipboard';
-import { CommonModule } from '@angular/common';
 import { Component, OnInit, signal } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
-import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { AuthService, GlobalPreferencesService, NotificationService } from '@lib/services';
 import { MeetApiKey } from '@lib/typings/ce';
@@ -18,22 +16,22 @@ import { MeetApiKey } from '@lib/typings/ce';
 	selector: 'ov-developers-settings',
 	standalone: true,
 	imports: [
-		CommonModule,
 		MatCardModule,
 		MatButtonModule,
 		MatIconModule,
 		MatInputModule,
 		MatFormFieldModule,
 		MatSlideToggleModule,
-		MatSnackBarModule,
 		MatTooltipModule,
-		MatDividerModule,
-		ReactiveFormsModule
+		ReactiveFormsModule,
+		MatProgressSpinnerModule
 	],
 	templateUrl: './developers.component.html',
 	styleUrl: './developers.component.scss'
 })
 export class DevelopersSettingsComponent implements OnInit {
+	isLoading = signal(true);
+
 	apiKeyData = signal<MeetApiKey | undefined>(undefined);
 	showApiKey = signal(false);
 
@@ -66,8 +64,10 @@ export class DevelopersSettingsComponent implements OnInit {
 	}
 
 	async ngOnInit() {
+		this.isLoading.set(true);
 		await this.loadApiKeyData();
 		await this.loadWebhookConfig();
+		this.isLoading.set(false);
 	}
 
 	// ===== API KEY METHODS =====
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.ts
index 2e54575..5722cfd 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.ts
+++ b/frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.ts
@@ -31,7 +31,7 @@ import { AuthMode } from '@lib/typings/ce';
 	styleUrl: './users-permissions.component.scss'
 })
 export class UsersPermissionsComponent implements OnInit {
-	isLoading = signal(false);
+	isLoading = signal(true);
 
 	adminCredentialsForm = new FormGroup({
 		adminUsername: new FormControl({ value: '', disabled: true }, [Validators.required]),