The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
lazy load guild select
+28
-11
+24
-9
app/profile/page.tsx
+24
-9
app/profile/page.tsx
···
15
15
import type { ApiV1UsersMeGuildsGetResponse } from "@/typings";
16
16
import { cn } from "@/utils/cn";
17
17
18
-
const MAX_GUILDS = 200 as const;
18
+
const MAX_GUILDS = 50 as const;
19
19
20
20
const springAnimation = {
21
21
hidden: { y: 20, opacity: 0 },
···
41
41
() => Array.isArray(data) ? data.sort(sort).filter((guild) => filter(guild, search)).slice(0, MAX_GUILDS) : [],
42
42
[data, search]
43
43
);
44
+
45
+
const isHuge = guilds.length > MAX_GUILDS;
44
46
45
47
if (error) {
46
48
return (
···
94
96
</div>
95
97
</div>
96
98
97
-
{!isLoading &&
99
+
{!isLoading && (
98
100
<motion.ul
99
101
variants={{
100
102
hidden: { opacity: 1, scale: 0 },
···
111
113
animate="visible"
112
114
className="grid grid-cols-1 gap-3.5 w-full mt-3 lg:grid-cols-3 md:grid-cols-2"
113
115
>
114
-
{guilds.map((guild) => <Guild key={"guild-" + guild.id} {...guild} />)}
116
+
{guilds.map((guild) => (
117
+
<Guild
118
+
key={"guild-" + guild.id}
119
+
{...guild}
120
+
isHugeGuildList={isHuge}
121
+
/>
122
+
))}
115
123
</motion.ul>
116
-
}
124
+
)}
117
125
118
-
{guilds.length > MAX_GUILDS &&
126
+
{isHuge && (
119
127
<ScreenMessage
120
128
title="There are too many servers.."
121
129
description={`To save some performance, use the search to find a guild. Showing ${MAX_GUILDS} out of ~${guilds.length < 1000 ? length : Math.round(length / 1000) * 1000}.`}
122
130
/>
123
-
}
124
-
131
+
)}
125
132
</div>);
126
133
}
127
134
···
143
150
return false;
144
151
}
145
152
146
-
function Guild({ id, name, icon, bot: hasBotInvited }: ApiV1UsersMeGuildsGetResponse) {
153
+
function Guild({
154
+
id,
155
+
name,
156
+
icon,
157
+
bot: hasBotInvited,
158
+
isHugeGuildList
159
+
}: ApiV1UsersMeGuildsGetResponse & { isHugeGuildList: boolean; }) {
147
160
return (
148
161
<motion.li
149
162
className={cn(
···
157
170
className="absolute top-[-48px] left-0 w-full z-0 blur-xl opacity-30 pointer-events-none"
158
171
size={16}
159
172
url={`https://cdn.discordapp.com/icons/${id}/${icon}`}
160
-
forceStatic={true}
173
+
forceStatic
174
+
lazy={isHugeGuildList}
161
175
/>
162
176
163
177
<ImageReduceMotion
···
165
179
className="rounded-lg size-15 z-1 relative drop-shadow-md"
166
180
size={56}
167
181
url={`https://cdn.discordapp.com/icons/${id}/${icon}`}
182
+
lazy={isHugeGuildList}
168
183
/>
169
184
170
185
<div className="ml-3 text-sm relative bottom-0.5">
+4
-2
components/image-reduce-motion.tsx
+4
-2
components/image-reduce-motion.tsx
···
9
9
alt: string;
10
10
className?: string;
11
11
forceStatic?: boolean;
12
+
lazy?: boolean;
12
13
}
13
14
14
15
export default function ImageReduceMotion({
···
16
17
size,
17
18
alt,
18
19
className,
19
-
forceStatic
20
+
forceStatic,
21
+
lazy = false
20
22
}: Props) {
21
23
const cookies = useCookies();
22
24
const reduceMotions = cookies.get("reduceMotions") === "true";
···
29
31
height={size}
30
32
alt={alt}
31
33
className={className}
32
-
loading="lazy"
34
+
loading={lazy ? "lazy" : "eager"}
33
35
draggable={false}
34
36
/>
35
37
);