A personal media tracker built on the AT Protocol
opnshelf.xyz
fix: prevent auth-state flash on homepage, login, and dashboard
Show a loading spinner instead of route-specific content when the auth
state is still resolving or when a redirect is pending. This stops
authenticated users from briefly seeing the logged-out landing page,
login form, or dashboard skeleton before the useEffect redirect fires.
+14
-4
+8
apps/web/src/routes/dashboard.tsx
+8
apps/web/src/routes/dashboard.tsx
···
15
15
} from "lucide-react";
16
16
import { useEffect } from "react";
17
17
import { FriendsActivitySection } from "#/components/following/FriendsActivitySection";
18
+
import LoadingState from "#/components/LoadingState";
18
19
import { setupApiClient } from "#/lib/api";
19
20
import { useAuth } from "#/lib/auth-context";
20
21
import { withUserLocale } from "#/lib/date-utils";
···
300
301
episodeInfo: `${item.show.title} • S${item.nextEpisode.seasonNumber}E${item.nextEpisode.episodeNumber}`,
301
302
};
302
303
}) || [];
304
+
305
+
// Show loading while auth state is resolving (or when not
306
+
// authenticated but the redirect hasn't fired yet) to prevent
307
+
// dashboard content from flashing for logged-out users
308
+
if (authLoading || !isAuthenticated) {
309
+
return <LoadingState />;
310
+
}
303
311
304
312
return (
305
313
<div className="container-app py-8">
+3
-2
apps/web/src/routes/index.tsx
+3
-2
apps/web/src/routes/index.tsx
···
32
32
}
33
33
}, [authLoading, isAuthenticated, user?.needsOnboarding, navigate]);
34
34
35
-
// Show loading while auth state is resolving to prevent
35
+
// Show loading while auth state is resolving (or when already
36
+
// authenticated but the redirect hasn't fired yet) to prevent
36
37
// logged-out content from flashing for logged-in users
37
-
if (authLoading) {
38
+
if (authLoading || isAuthenticated) {
38
39
return <LoadingState />;
39
40
}
40
41
+3
-2
apps/web/src/routes/login.tsx
+3
-2
apps/web/src/routes/login.tsx
···
27
27
}
28
28
}, [isAuthenticated, navigate]);
29
29
30
-
// Show loading while auth state is resolving to prevent
30
+
// Show loading while auth state is resolving (or when already
31
+
// authenticated but the redirect hasn't fired yet) to prevent
31
32
// login form from flashing for logged-in users
32
-
if (authLoading) {
33
+
if (authLoading || isAuthenticated) {
33
34
return <LoadingState />;
34
35
}
35
36