From 38a35cb40966285c7a2b3341eb2f794fcda29c85 Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Tue, 10 Feb 2026 13:30:02 +0000
Subject: [PATCH] fix: show loader instead of login form when demo mode is
 active

Prevents the login form from flashing on screen when /login?mode=demo
is loaded, while app.component handles the demo login API call.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../app/components/login/login.component.css  | 19 ++++++++++++++++---
 .../app/components/login/login.component.html |  9 +++++++++
 .../app/components/login/login.component.ts   |  9 +++++++--
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/login/login.component.css b/frontend/src/app/components/login/login.component.css
index 793f9b777..0379f328f 100644
--- a/frontend/src/app/components/login/login.component.css
+++ b/frontend/src/app/components/login/login.component.css
@@ -1,9 +1,9 @@
 :host app-alert:not(:empty) {
-    --alert-margin: 24px;
+	--alert-margin: 24px;
 
 	position: absolute;
-    top: var(--mat-toolbar-standard-height);
-    width: calc(100% - 48px);
+	top: var(--mat-toolbar-standard-height);
+	width: calc(100% - 48px);
 }
 
 .wrapper {
@@ -360,3 +360,16 @@
 		transform: translateX(100%);
 	}
 }
+
+.demo-loader {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: 24px;
+}
+
+.demo-loader__text {
+	color: var(--mat-sidenav-content-text-color);
+	margin: 0;
+}
diff --git a/frontend/src/app/components/login/login.component.html b/frontend/src/app/components/login/login.component.html
index 13d742263..86266b272 100644
--- a/frontend/src/app/components/login/login.component.html
+++ b/frontend/src/app/components/login/login.component.html
@@ -1,5 +1,13 @@
 <app-alert></app-alert>
 
+@if (isDemoMode) {
+    <div class="wrapper background-decoration">
+        <div class="login-page demo-loader">
+            <mat-spinner diameter="48"></mat-spinner>
+            <p class="mat-body-1 demo-loader__text">Loading demo account...</p>
+        </div>
+    </div>
+} @else {
 <div class="wrapper background-decoration">
     <div class="login-page">
         <form
@@ -133,4 +141,5 @@ <h2 class="mat-headline-4 qr-verification__title">Enter 2nd factor code</h2>
         </form>
     </div>
 </div>
+}
 
diff --git a/frontend/src/app/components/login/login.component.ts b/frontend/src/app/components/login/login.component.ts
index cb0b0161f..0bfebeef5 100644
--- a/frontend/src/app/components/login/login.component.ts
+++ b/frontend/src/app/components/login/login.component.ts
@@ -6,8 +6,9 @@ import { MatDialog } from '@angular/material/dialog';
 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 { MatSelectModule } from '@angular/material/select';
-import { Router, RouterModule } from '@angular/router';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { Angulartics2, Angulartics2OnModule } from 'angulartics2';
 import { accounts } from 'google-one-tap';
 import { EmailValidationDirective } from 'src/app/directives/emailValidator.directive';
@@ -35,6 +36,7 @@ declare var google: any;
 		MatSelectModule,
 		MatIconModule,
 		MatButtonModule,
+		MatProgressSpinnerModule,
 		EmailValidationDirective,
 		AlertComponent,
 		Angulartics2OnModule,
@@ -55,6 +57,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
 	public submitting: boolean;
 	public isPasswordFieldShown: boolean = false;
 	public is2FAShown: boolean = false;
+	public isDemoMode: boolean = false;
 	public errors = {
 		'No_user_registered_with_this_GitHub_account.': 'No user registered with this GitHub account.',
 		'GitHub_login_failed._Please_contact_our_support_team.': 'GitHub login failed. Please contact our support team.',
@@ -63,6 +66,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
 	constructor(
 		private _auth: AuthService,
 		public router: Router,
+		private _route: ActivatedRoute,
 		private angulartics2: Angulartics2,
 		private ngZone: NgZone,
 		private _notifications: NotificationsService,
@@ -71,6 +75,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
 	) {}
 
 	ngOnInit(): void {
+		this.isDemoMode = this._route.snapshot.queryParams['mode'] === 'demo';
 		this.isCustomDomain = this._company.isCustomDomain() && this.isSaas;
 
 		const error = new URLSearchParams(location.search).get('error');
@@ -85,7 +90,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
 	}
 
 	ngAfterViewInit() {
-		if (this.isSaas) {
+		if (this.isSaas && !this.isDemoMode) {
 			const gAccounts: accounts = google.accounts;
 			gAccounts.id.initialize({
 				client_id: '681163285738-e4l0lrv5vv7m616ucrfhnhso9r396lum.apps.googleusercontent.com',