kennethscoffee/starr-philproperties
1
0
Fork 0
mirror of https://github.com/rgrgogu/new_starr.git synced 2026-09-27 00:12:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

added tier badge loading fallback

Browse Source
This commit is contained in:
rgrgogu
2026-07-31 00:35:45 +08:00
parent 975b16b8c6
commit d97946463d
1 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/client/layout/ClientLayout.jsx
+15 -2
View File
@@ -152,12 +152,20 @@ function ClientNav() {
// Caches the resolved stream URL per asset_id — avoids re-hitting /media/token // Caches the resolved stream URL per asset_id — avoids re-hitting /media/token
// for the same asset on re-renders. Token TTL is 4h so safe within a session. // for the same asset on re-renders. Token TTL is 4h so safe within a session.
const badgeTokenCache = useRef({}) const badgeTokenCache = useRef({})
// Starts false on every mount (incl. full page reloads) so the tier badge
// shows a gray skeleton instead of flashing "Free" before /tiers/me resolves —
// myTier stays null for genuinely-free users too, so it can't be used as the signal.
const [tierReady, setTierReady] = useState(false)
useEffect(() => { useEffect(() => {
if (!user) return; if (!user) return;
if (achievements.length === 0) getAchievements(); if (achievements.length === 0) getAchievements();
if (!myTier) getMyTier();
if (tierCategories.length === 0) getTierCategories(); if (tierCategories.length === 0) getTierCategories();
if (!myTier) {
getMyTier().finally(() => setTierReady(true));
} else {
setTierReady(true);
}
}, [user]); }, [user]);
// ── Derive directly from auth user — same pattern as admin UserMenu ────── // ── Derive directly from auth user — same pattern as admin UserMenu ──────
@@ -247,7 +255,12 @@ function ClientNav() {
</svg> </svg>
</div> </div>
<div id="name" className="lg:-ml-1 font-medium text-sm flex items-center gap-2"> <div id="name" className="lg:-ml-1 font-medium text-sm flex items-center gap-2">
{tierBadge && ( {!tierReady ? (
<div className="xs:hidden md:inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold bg-muted animate-pulse">
<div className="size-3 rounded-full bg-muted-foreground/30" />
<span className="text-transparent select-none">Free</span>
</div>
) : tierBadge && (
<div className={`xs:hidden md:inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold ${tierBadge.cls}`}> <div className={`xs:hidden md:inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold ${tierBadge.cls}`}>
{badgeImgUrl {badgeImgUrl
? <img src={badgeImgUrl} className="size-3.5 rounded-full object-cover" /> ? <img src={badgeImgUrl} className="size-3.5 rounded-full object-cover" />