Added loading indicator

This commit is contained in:
Roman Krček
2025-09-02 18:18:58 +02:00
parent eb0276e475
commit fa685e6ba9
3 changed files with 74 additions and 8 deletions

View File

@@ -21,8 +21,8 @@
let authState = $state(createGoogleAuthState());
let authManager = new GoogleAuthManager(authState);
onMount(() => {
authManager.checkConnection();
onMount(async () => {
await authManager.checkConnection();
});
async function handleConnect() {
@@ -57,7 +57,14 @@
};
</script>
{#if authState.isConnected}
{#if authState.checking}
<div class="flex items-center gap-3">
<div class="flex items-center gap-2 rounded-full bg-gray-100 px-3 py-1 border border-gray-300 whitespace-nowrap">
<div class="w-4 h-4 animate-spin rounded-full border-2 border-current border-t-transparent text-gray-600"></div>
<span class="text-sm font-medium text-gray-800">Checking connection...</span>
</div>
</div>
{:else if authState.isConnected}
<div class="flex flex-wrap items-center gap-3">
<div class="flex items-center gap-2 rounded-full bg-green-100 px-3 py-1 border border-green-300 whitespace-nowrap">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-600" viewBox="0 0 20 20" fill="currentColor">