From 68e4d0b77b368c88c6160fe0762bd533995fe3df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roman=20Kr=C4=8Dek?= <roman.krcek@tietoevry.com>
Date: Mon, 8 Sep 2025 16:04:50 +0200
Subject: [PATCH] Add loader for google services

---
 src/lib/components/wizard/StepAuth.svelte | 27 +++++++++++++++++++++--
 src/lib/google.ts                         |  3 ++-
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/wizard/StepAuth.svelte b/src/lib/components/wizard/StepAuth.svelte
index 4eb9fd2..991a2f1 100644
--- a/src/lib/components/wizard/StepAuth.svelte
+++ b/src/lib/components/wizard/StepAuth.svelte
@@ -1,8 +1,23 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { currentStep } from '$lib/stores.js';
-	import { isSignedIn, handleSignOut, requestTokenFromUser } from '$lib/google';
+	import {
+		isSignedIn,
+		handleSignOut,
+		requestTokenFromUser,
+		isGoogleApiReady,
+		initGoogleClients
+	} from '$lib/google';
 	import Navigator from './subcomponents/Navigator.svelte';
 
+	onMount(() => {
+		if (!$isGoogleApiReady) {
+			initGoogleClients(() => {
+				// This callback is called when the Google clients are ready.
+			});
+		}
+	});
+
 	function handleSignIn() {
 		requestTokenFromUser();
 	}
@@ -46,7 +61,15 @@
 		<div
 			class="flex flex-col items-center justify-center rounded-lg border border-gray-200 bg-gray-50 p-8"
 		>
-			{#if $isSignedIn}
+			{#if !$isGoogleApiReady}
+				<!-- Loading state -->
+				<div class="flex items-center justify-center gap-2">
+					<div
+						class="h-6 w-6 animate-spin rounded-full border-2 border-blue-600 border-t-transparent"
+					></div>
+					<span class="text-sm text-gray-600">Loading Google services...</span>
+				</div>
+			{:else if $isSignedIn}
 				<!-- Authenticated state -->
 				<div class="text-center">
 					<div class="flex items-center justify-center gap-2">
diff --git a/src/lib/google.ts b/src/lib/google.ts
index fa649a9..3941fc0 100644
--- a/src/lib/google.ts
+++ b/src/lib/google.ts
@@ -15,6 +15,7 @@ let gsiInited = false;
 export function initGoogleClients(callback: () => void) {
 	// If everything is already initialized, just run the callback.
 	if (gapiInited && gsiInited) {
+		isGoogleApiReady.set(true); // Ensure it's set if called again
 		callback();
 		return;
 	}
@@ -37,7 +38,6 @@ export function initGoogleClients(callback: () => void) {
 					})
 					.then(() => {
 						gapiInited = true;
-						isGoogleApiReady.set(true);
 						// Now that GAPI is ready, initialize the GSI client.
 						initGsiClient(callback);
 					});
@@ -104,6 +104,7 @@ function initGsiClient(callback: () => void) {
 				}
 			}
 		});
+		isGoogleApiReady.set(true);
 		callback();
 	};
 }