alternative tangled frontend (extremely wip)
1import { useState, useEffect } from "react";
2import { AnimatePresence, motion } from "motion/react";
3
4export const Avatar = ({
5 uri,
6 className = "outline-accent h-10 rounded-full min-w-10 outline",
7}: {
8 uri: string | undefined;
9 className?: string;
10}) => {
11 const [loaded, setLoaded] = useState(false);
12
13 useEffect(() => {
14 setLoaded(false);
15 }, [uri]);
16
17 return (
18 <div className={`relative overflow-hidden ${className}`}>
19 <AnimatePresence>
20 {(!loaded || !uri) && (
21 <motion.div
22 key="skeleton"
23 className="bg-overlay0 absolute inset-0 min-w-24 animate-pulse"
24 exit={{ opacity: 0 }}
25 transition={{ duration: 0.2 }}
26 />
27 )}
28 </AnimatePresence>
29
30 <motion.img
31 key={uri}
32 src={uri}
33 onLoad={() => setLoaded(true)}
34 className="size-full object-cover"
35 initial={{ opacity: 0 }}
36 animate={{ opacity: loaded ? 1 : 0 }}
37 transition={{ duration: 0.2 }}
38 alt={`Your profile picture found at ${uri}`}
39 />
40 </div>
41 );
42};