cosmik.network
A social knowledge tool for researchers built on ATProto
feat: add loading state to login page during authentication check
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <aider@aider.chat>
+16
src/webapp/app/login/page.tsx
+16
src/webapp/app/login/page.tsx
···
15
PasswordInput,
16
Text,
17
Group,
18
} from '@mantine/core';
19
import { getAccessToken } from '@/services/auth';
20
···
24
const [isLoading, setIsLoading] = useState(false);
25
const [error, setError] = useState('');
26
const [useAppPassword, setUseAppPassword] = useState(false);
27
const router = useRouter();
28
const searchParams = useSearchParams();
29
const { setTokens, isAuthenticated } = useAuth();
···
43
} else if (isAuthenticated && !isExtensionLogin) {
44
// If user is already authenticated and not doing extension login, redirect to library
45
router.push('/library');
46
}
47
}, [isExtensionLogin, isAuthenticated]);
48
···
130
setIsLoading(false);
131
}
132
};
133
134
return (
135
<Center h={'100svh'}>
···
15
PasswordInput,
16
Text,
17
Group,
18
+
Loader,
19
} from '@mantine/core';
20
import { getAccessToken } from '@/services/auth';
21
···
25
const [isLoading, setIsLoading] = useState(false);
26
const [error, setError] = useState('');
27
const [useAppPassword, setUseAppPassword] = useState(false);
28
+
const [isCheckingAuth, setIsCheckingAuth] = useState(true);
29
const router = useRouter();
30
const searchParams = useSearchParams();
31
const { setTokens, isAuthenticated } = useAuth();
···
45
} else if (isAuthenticated && !isExtensionLogin) {
46
// If user is already authenticated and not doing extension login, redirect to library
47
router.push('/library');
48
+
} else {
49
+
// Auth check is complete, show the login form
50
+
setIsCheckingAuth(false);
51
}
52
}, [isExtensionLogin, isAuthenticated]);
53
···
135
setIsLoading(false);
136
}
137
};
138
+
139
+
// Show loading while checking authentication status
140
+
if (isCheckingAuth || isAuthenticated) {
141
+
return (
142
+
<Center h={'100svh'}>
143
+
<Stack align="center">
144
+
<Loader size="lg" />
145
+
</Stack>
146
+
</Center>
147
+
);
148
+
}
149
150
return (
151
<Center h={'100svh'}>