Add loader for google services
All checks were successful
Build Docker image / build (push) Successful in 8m8s
Build Docker image / deploy (push) Successful in 4s
Build Docker image / verify (push) Successful in 30s

This commit is contained in:
Roman Krček
2025-09-08 16:04:50 +02:00
parent e43101648b
commit 68e4d0b77b
2 changed files with 27 additions and 3 deletions

View File

@@ -1,8 +1,23 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte';
import { currentStep } from '$lib/stores.js'; 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'; import Navigator from './subcomponents/Navigator.svelte';
onMount(() => {
if (!$isGoogleApiReady) {
initGoogleClients(() => {
// This callback is called when the Google clients are ready.
});
}
});
function handleSignIn() { function handleSignIn() {
requestTokenFromUser(); requestTokenFromUser();
} }
@@ -46,7 +61,15 @@
<div <div
class="flex flex-col items-center justify-center rounded-lg border border-gray-200 bg-gray-50 p-8" 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 --> <!-- Authenticated state -->
<div class="text-center"> <div class="text-center">
<div class="flex items-center justify-center gap-2"> <div class="flex items-center justify-center gap-2">

View File

@@ -15,6 +15,7 @@ let gsiInited = false;
export function initGoogleClients(callback: () => void) { export function initGoogleClients(callback: () => void) {
// If everything is already initialized, just run the callback. // If everything is already initialized, just run the callback.
if (gapiInited && gsiInited) { if (gapiInited && gsiInited) {
isGoogleApiReady.set(true); // Ensure it's set if called again
callback(); callback();
return; return;
} }
@@ -37,7 +38,6 @@ export function initGoogleClients(callback: () => void) {
}) })
.then(() => { .then(() => {
gapiInited = true; gapiInited = true;
isGoogleApiReady.set(true);
// Now that GAPI is ready, initialize the GSI client. // Now that GAPI is ready, initialize the GSI client.
initGsiClient(callback); initGsiClient(callback);
}); });
@@ -104,6 +104,7 @@ function initGsiClient(callback: () => void) {
} }
} }
}); });
isGoogleApiReady.set(true);
callback(); callback();
}; };
} }