frontend: add loading state handling in DevelopersComponent

frontend/projects/shared-meet-components/src/lib/pages/console/developers/developers.component.html

@@ -7,6 +7,23 @@
 		<p class="subtitle">Everyting you need to embed OpenVidu Meet in your applications.</p>
 	</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="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">
@@ -120,7 +137,6 @@
 							}
 						</mat-form-field>
 
-
 						<!-- Event Configuration -->
 						<!-- <div class="events-section">
 						<h4>Event Types</h4>
@@ -171,11 +187,16 @@
 						<mat-icon>save</mat-icon>
 						Save Configuration
 					</button>
-				<button mat-stroked-button (click)="testWebhook()" [disabled]="!webhookForm.get('url')?.value">
+					<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>

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

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]),