Avatar + Skeleton

[ksamirdev]

Hey. Is there any way to get skeleton loading when loading the user's avatar? I got my profile from s3.

[ksamirdev]

Nvm it was pretty easy implementation.

"use client";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import React, { useState } from "react";
import { Skeleton } from "../ui/skeleton";
import { cn } from "@/lib/utils";

export const NavAvatar: React.FC<{ src: string; username: string }> = ({
  src,
  username,
}) => {
  const [isLoaded, setIsLoaded] = useState(false);

  return (
    <React.Fragment>
      <Avatar className={cn(isLoaded ? "" : "hidden")}>
        <AvatarImage
          src={src}
          onLoadingStatusChange={(status) => {
            status === "loaded" ? setIsLoaded(true) : null;
          }}
        />
      </Avatar>
      {!isLoaded ? (
        <Skeleton
          className={`min-h-[40px] min-w-[40px] rounded-lg z-50 bg-white`}
        />
      ) : null}
    </React.Fragment>
  );
};