Add loader for google services
This commit is contained in:
@@ -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">
|
||||||
|
|||||||
@@ -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();
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user