shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add skeleton loader

Browse Source
This commit is contained in:
Henry
2025-10-29 21:24:55 +00:00
parent 8a6003169e
commit 580e002900
1 changed files with 51 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/web/src/views/oss-friends/index.tsx
View File

@@ -18,6 +18,7 @@ interface OSSFriendsResponse {
export default function OSSFriendsView() {
const [ossFriends, setOSSFriends] = useState<OSSFriend[]>([]);
const [isLoading, setIsLoading] = useState<boolean>(true);
const fetchOSSFriends = async (): Promise<OSSFriend[]> => {
try {
const response = await fetch("/api/oss-friends");
@@ -36,8 +37,12 @@ export default function OSSFriendsView() {
useEffect(() => {
async function fetchData() {
try {
const data = await fetchOSSFriends();
setOSSFriends(data);
} finally {
setIsLoading(false);
}
}
void fetchData();
}, []);
@@ -59,7 +64,23 @@ export default function OSSFriendsView() {
</div>
<div className="mx-auto w-full max-w-7xl px-4 pb-24">
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
{ossFriends.map((friend, idx) => {
{isLoading &&
Array.from({ length: 12 }).map((_, idx) => (
<div
key={`oss-friend-skeleton-${idx}`}
className="group relative h-[200px] rounded-2xl border border-light-200 bg-light-50 p-6 dark:border-dark-200 dark:bg-dark-50"
>
<div className="mb-4 flex flex-col gap-3">
<div className="h-5 w-2/3 animate-pulse rounded-sm bg-light-200 dark:bg-dark-200" />
<div className="h-3 w-full animate-pulse rounded-sm bg-light-200 dark:bg-dark-200" />
<div className="h-3 w-5/6 animate-pulse rounded-sm bg-light-200 dark:bg-dark-200" />
</div>
<div className="h-8 w-28 animate-pulse rounded-md bg-light-200 dark:bg-dark-200" />
</div>
))}
{!isLoading &&
ossFriends.map((friend, idx) => {
return (
<div
key={`oss-friend-${idx}`}