alternative tangled frontend (extremely wip)
feat: user loaders
+68
-18
+1
-3
src/components/Homepage/TrendingFeed.tsx
+1
-3
src/components/Homepage/TrendingFeed.tsx
+35
-2
src/components/Profile/Avatar.tsx
+35
-2
src/components/Profile/Avatar.tsx
···
1
+
import { useState, useEffect } from "react";
2
+
import { AnimatePresence, motion } from "motion/react";
3
+
1
4
export const Avatar = ({
2
5
uri,
3
-
className = "outline-accent h-10 rounded-full outline",
6
+
className = "outline-accent h-10 rounded-full min-w-10 outline",
4
7
}: {
5
8
uri: string | undefined;
6
9
className?: string;
7
10
}) => {
8
-
return <img src={uri} className={className} />;
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 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
+
);
9
42
};
+6
-3
src/lib/queries/get-trending-from-stitch.ts
+6
-3
src/lib/queries/get-trending-from-stitch.ts
···
1
1
import { queryOptions, useQuery } from "@tanstack/react-query";
2
2
import { z } from "zod/v4";
3
-
import { appBskyFeedPostSchema } from "@/lib/types/lexicons/app/bsky/feed/post";
3
+
import {
4
+
AppBskyFeedPost,
5
+
appBskyFeedPostSchema,
6
+
} from "@/lib/types/lexicons/app/bsky/feed/post";
4
7
import { comAtprotoRepoGetRecordOutputSchema } from "@/lib/types/lexicons/com/atproto/repo/getRecord";
5
8
import { stripTrailingSlashFromUrl } from "@/lib/utils";
6
9
7
10
const STITCH_DID = "did:plc:vsicp7h3rpa2pbfid3zzwqoy";
8
11
const STITCH_PDS_URL = new URL("https://selfhosted.social");
9
12
10
-
export const getTrendingFromStitch = async () => {
13
+
export const getTrendingFromStitch = async (): Promise<AppBskyFeedPost[]> => {
11
14
const cleanedUrl = stripTrailingSlashFromUrl(STITCH_PDS_URL);
12
15
13
16
const trendingReq = new Request(
···
34
37
throw new Error(error.message);
35
38
}
36
39
37
-
return parseData.records;
40
+
return parseData.records.map((record) => record.value);
38
41
};
39
42
40
43
export const stitchTrendingQueryOptions = queryOptions({
+16
-2
src/routes/_layout/index.tsx
+16
-2
src/routes/_layout/index.tsx
···
5
5
import { Loading } from "@/components/Icons/Loading";
6
6
import { useOAuth } from "@/lib/oauth";
7
7
import { useAvatarQuery } from "@/lib/queries/get-avatar";
8
+
import { stitchTrendingQueryOptions } from "@/lib/queries/get-trending-from-stitch";
9
+
import { Avatar } from "@/components/Profile/Avatar";
8
10
9
-
export const Route = createFileRoute("/_layout/")({ component: App });
11
+
export const Route = createFileRoute("/_layout/")({
12
+
//@ts-expect-error fucky wucky client typies
13
+
loader: ({ context: { queryClient } }) => {
14
+
return queryClient.ensureQueryData(stitchTrendingQueryOptions);
15
+
},
16
+
component: App,
17
+
});
10
18
11
19
function App() {
12
20
return (
···
33
41
return (
34
42
<div className="border-overlay0 flex flex-col items-start gap-4">
35
43
<div className="flex items-center gap-4 pl-2">
36
-
<img src={avatarSrc} className="h-20 w-20 rounded-full" />
44
+
{!avatarSrc ? (
45
+
<div className="flex h-24 items-center w-24 justify-center">
46
+
<Loading />
47
+
</div>
48
+
) : (
49
+
<Avatar uri={avatarSrc} className="h-24 rounded-full min-w-24" />
50
+
)}
37
51
<div>
38
52
<h2 className="text-xl font-semibold">
39
53
Hello @{handle}!