lucalise/ghostv2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add spinner to sign-in

Browse Source
This commit is contained in:
lucalise
2026-01-22 17:48:53 -08:00
parent 496ed2cb00
commit c1bcc2ce4a
1 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/lib/Header.svelte
View File

@@ -2,7 +2,7 @@
import { Avatar, Button, DropdownMenu, Separator } from 'bits-ui'; import { Avatar, Button, DropdownMenu, Separator } from 'bits-ui';
import { authClient } from './auth-client'; import { authClient } from './auth-client';
import Image from './Image.svelte'; import Image from './Image.svelte';
import { CircleUser, FolderGit2, User } from '@lucide/svelte'; import { CircleUser, FolderGit2, Loader2, User } from '@lucide/svelte';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
type MockUser = { type MockUser = {
image: string; image: string;
@@ -10,11 +10,16 @@
const session = authClient.useSession(); const session = authClient.useSession();
const user = $derived($session.data?.user); const user = $derived($session.data?.user);
let loading = $state(false);
const signIn = async () => { const signIn = async () => {
await authClient.signIn.social({ loading = true;
const { error } = await authClient.signIn.social({
provider: 'github' provider: 'github'
}); });
if (error) {
loading = false;
}
}; };
</script> </script>
@@ -25,7 +30,11 @@
</Button.Root> </Button.Root>
{#if !user && !$session.isPending} {#if !user && !$session.isPending}
<Button.Root class="rounded-md p-2 transition-colors hover:bg-gray-800" onclick={signIn}> <Button.Root class="rounded-md p-2 transition-colors hover:bg-gray-800" onclick={signIn}>
{#if loading}
<Loader2 class="animate-spin" />
{:else}
Sign In Sign In
{/if}
</Button.Root> </Button.Root>
{:else if user} {:else if user}
<DropdownMenu.Root> <DropdownMenu.Root>