some roblox stuff again

components/loggedInHeader.tsx

@@ -1,57 +1,65 @@
 "use client";
 
-import {
-	getLoggedInUser,
-	getUserByUserId,
-	UserProfileDetails
-} from "@/lib/profile";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import LazyLoadedImage from "./lazyLoadedImage";
-import { loadThumbnails } from "@/lib/thumbnailLoader";
-import { PremiumIconSmall, VerifiedIcon } from "./RobloxIcons";
+import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
+import { OctagonXIcon } from "lucide-react";
+import { RobloxPremiumSmall, RobloxVerifiedSmall } from "./RobloxTooltipStuff";
+import { useCurrentAccount } from "@/hooks/roblox/useCurrentAccount";
+import { Skeleton } from "./ui/skeleton";
 
-export const HomeLoggedInHeader = React.memo(function HomeLoggedInHeader() {
-	const [profileDetails, setProfileDetails] =
-		useState<UserProfileDetails | null>(null);
+export function HomeLoggedInHeader() {
+	const profile = useCurrentAccount();
 
-	useEffect(() => {
-		(async () => {
-			const authed = await getLoggedInUser();
-			setProfileDetails(await getUserByUserId(authed.id.toString()));
-		})();
-	}, []);
-
-	if (!profileDetails) {
-		return <></>;
+	if (profile === false) {
+		return (
+			<div className="justify-center w-screen px-8 py-6">
+				<Alert variant="destructive" className="space-x-2">
+					<OctagonXIcon />
+					<AlertTitle>Failed to fetch account info</AlertTitle>
+					<AlertDescription>
+						Please make sure <code>.ROBLOSECURITY</code> is set! Is
+						Roblox having an outage?
+					</AlertDescription>
+				</Alert>
+			</div>
+		);
 	}
 
-	loadThumbnails([
-		{
-			type: "AvatarHeadShot",
-			targetId: profileDetails.id,
-			format: "webp",
-			size: "720x720"
-		}
-	]).catch((a) => {});
-
 	return (
-		<div className="flex items-center gap-6 bg-base rounded-xl px-8 py-6 w-fit mt-8 ml-0">
-			<LazyLoadedImage
-				imgId={`AvatarHeadShot_${profileDetails.id}`}
-				alt=""
-				className="w-28 h-28 rounded-full shadow-2xl"
-			/>
-			<div className="flex flex-col justify-center">
-				<span className="text-3xl font-bold text-text flex items-center gap-2">
-					Hello, {profileDetails.displayName}
-					{/* TODO: Fetch the User's Roblox Premium subscription state */}
-					<PremiumIconSmall className="w-6 h-6 fill-transparent" />
-					<VerifiedIcon className="w-6 h-6 fill-blue text-base" />
-				</span>
-				<span className="text-base font-mono text-subtext0 mt-1">
-					@{profileDetails.name}
-				</span>
+		<>
+			<div className="flex items-center gap-6 bg-base rounded-xl px-8 py-6 w-fit mt-8 ml-0">
+				{!profile ? (
+					<Skeleton className="w-28 h-28 rounded-full" />
+				) : (
+					<LazyLoadedImage
+						imgId={`AvatarHeadShot_${profile.id}`}
+						alt=""
+						className="w-28 h-28 rounded-full shadow-crust"
+					/>
+				)}
+				<div className="flex flex-col justify-center">
+					<span className="text-3xl font-bold text-text flex items-center gap-2">
+						{profile ? (
+							<>Hello, {profile.displayName}</>
+						) : (
+							<>
+								<Skeleton className="w-96 h-8 rounded-lg" />
+							</>
+						)}
+						{/* TODO: Fetch the User's Roblox Premium subscription state */}
+						<RobloxPremiumSmall className="w-6 h-6 fill-transparent" />
+						<RobloxVerifiedSmall className="w-6 h-6 fill-blue text-base" />
+					</span>
+					<span className="text-base font-mono text-subtext0 mt-1">
+						{profile ? (
+							<>@{profile.name}</>
+						) : (
+							<Skeleton className="w-64 h-6 rounded-lg" />
+						)}
+					</span>
+				</div>
 			</div>
-		</div>
+		</>
 	);
-});
+}