feat: incremtal loading

packages/website-ue/src/components/AvatarCard/index.tsx

@@ -1,23 +1,26 @@
 import { useGameStrings } from "../../hooks/useGameStrings";
 import type { Avatar } from "../../protos/avatar";
+import type { SkeletonProps } from "../../types/SkeletonProps";
 import { Text } from "../Text";
 import "./index.css";
 
-interface Props {
-  avatar: Avatar;
-}
-
-export function AvatarCard({ avatar }: Props) {
+export function AvatarCard(props: SkeletonProps<Avatar>) {
   const profileAvatarEntityStrings = useGameStrings("ProfileAvatarEntity");
 
   return (
     <div className="avatar-card">
       <div
         className="avatar-image"
-        style={{ backgroundImage: `url(/api/avatars/${avatar.name}.webp)` }}
+        style={{
+          backgroundImage: props.skeleton
+            ? undefined
+            : `url(/api/avatars/${props.name}.webp)`,
+        }}
       />
       <Text align="center" className="avatar-label">
-        {profileAvatarEntityStrings[avatar.stuff_ui!.display_name]}
+        {props.skeleton
+          ? "LOADING"
+          : profileAvatarEntityStrings[props.stuff_ui!.display_name]}
       </Text>
     </div>
   );