Skip to content

Commit 7917ddf

Browse files
offbeatjsoffbeatjs
committed
Refactor hero search and add repos loading skeleton
Refactored the hero search form to separate the input and submit button, improving accessibility and layout. Added a loading skeleton for the repos page to enhance user experience during data fetching. Also simplified language parameter parsing in the repos page. - the repos/loading.tsx is exact same as the /repos/[language]/loading.tsx
1 parent f907abc commit 7917ddf

File tree

3 files changed

+118
-15
lines changed

3 files changed

+118
-15
lines changed

‎src/app/(public)/_components/hero.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ router.push(`/repos?${params.toString()}`);
5656
Search your language(s)
5757
</h1>
5858
<form
59+
id="hero-search-form"
5960
className="items-center w-full max-w-xs mx-auto form-control outline-none mt-8"
6061
onSubmit={handleSearch}
6162
>
@@ -69,12 +70,6 @@ router.push(`/repos?${params.toString()}`);
6970
name="search"
7071
/>
7172
</div>
72-
<button
73-
type="submit"
74-
className="bg-transparent rounded-tl-none rounded-bl-none group btn btn-square text-hacktoberfest-light border-hacktoberfest-light hover:!border-hacktoberfest-light hover:bg-primary-btn-hover-gradient flex-shrink-0"
75-
>
76-
<Search size={16} className="sm:w-5 sm:h-5" />
77-
</button>
7873
</div>
7974
</form>
8075
<p className="font-medium uppercase text-hacktoberfest-light text-sm sm:text-base">
@@ -142,14 +137,18 @@ router.push(`/repos?${params.toString()}`);
142137
})}
143138
</ul>
144139
</div>
145-
<form className="mt-6 flex justify-center" onSubmit={handleSearch}>
140+
<div className="mt-6 flex items-center justify-center">
146141
<button
147142
type="submit"
148-
className="bg-transparent rounded-tl-none rounded-bl-none group btn btn-square text-hacktoberfest-light border-hacktoberfest-light hover:!border-hacktoberfest-light hover:bg-primary-btn-hover-gradient flex-shrink-0"
143+
form="hero-search-form"
144+
aria-label="Search repositories"
145+
title="Search"
146+
className="bg-transparent rounded-tl-none rounded-bl-none group btn text-hacktoberfest-light border-hacktoberfest-light hover:!border-hacktoberfest-light hover:bg-primary-btn-hover-gradient flex items-center gap-2 px-5"
149147
>
150148
<Search size={16} className="sm:w-5 sm:h-5" />
149+
<span className="text-sm sm:text-base">Search</span>
151150
</button>
152-
</form>
151+
</div>
153152

154153
</div>
155154
<MarqueTextAnimation />

‎src/app/(public)/repos/loading.tsx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
export default function Loading() {
2+
return (
3+
<>
4+
{/* Header Skeleton */}
5+
<div className="border-b border-hacktoberfest-dark-green">
6+
<div className="container mx-auto px-4 py-4">
7+
<div className="flex items-center justify-between">
8+
<div className="h-8 w-32 bg-shimmer animate-shimmer rounded-md"></div>
9+
<div className="flex space-x-4">
10+
<div className="h-8 w-20 bg-shimmer animate-shimmer rounded-md"></div>
11+
<div className="h-8 w-24 bg-shimmer animate-shimmer rounded-md"></div>
12+
</div>
13+
</div>
14+
</div>
15+
</div>
16+
17+
<div className="container mx-auto">
18+
<div className="min-h-screen pt-5">
19+
{/* Title Section Skeleton */}
20+
<div className="text-center">
21+
<div className="w-5/6 max-w-md mx-auto">
22+
<div className="mb-5 space-y-3">
23+
<div className="h-12 w-full bg-shimmer animate-shimmer rounded-lg"></div>
24+
<div className="h-8 w-3/4 mx-auto bg-shimmer animate-shimmer rounded-lg"></div>
25+
</div>
26+
</div>
27+
</div>
28+
29+
{/* Sorter Skeleton */}
30+
<div className="flex justify-center mb-6">
31+
<div className="flex space-x-4">
32+
<div className="h-10 w-24 bg-shimmer animate-shimmer rounded-md"></div>
33+
<div className="h-10 w-28 bg-shimmer animate-shimmer rounded-md"></div>
34+
<div className="h-10 w-20 bg-shimmer animate-shimmer rounded-md"></div>
35+
</div>
36+
</div>
37+
38+
{/* Stars Filter Skeleton */}
39+
<div className="flex justify-center mb-8">
40+
<div className="flex space-x-3">
41+
<div className="h-10 w-32 bg-shimmer animate-shimmer rounded-md"></div>
42+
<div className="h-10 w-16 bg-shimmer animate-shimmer rounded-md"></div>
43+
<div className="h-10 w-32 bg-shimmer animate-shimmer rounded-md"></div>
44+
</div>
45+
</div>
46+
47+
{/* Repository Cards Grid Skeleton */}
48+
<div className="grid grid-cols-1 gap-8 p-4 md:grid-cols-2 lg:grid-cols-3">
49+
{Array.from({ length: 21 }).map((_, index) => (
50+
<div
51+
key={index}
52+
className="bg-hacktoberfest-black border border-hacktoberfest-dark-green rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow duration-200"
53+
>
54+
{/* Repository Title */}
55+
<div className="mb-4">
56+
<div className="h-6 w-3/4 bg-shimmer animate-shimmer rounded mb-2"></div>
57+
<div className="h-4 w-full bg-shimmer animate-shimmer rounded"></div>
58+
<div className="h-4 w-2/3 bg-shimmer animate-shimmer rounded mt-1"></div>
59+
</div>
60+
61+
{/* Language and Stats */}
62+
<div className="flex items-center justify-between mb-4">
63+
<div className="flex items-center space-x-2">
64+
<div className="h-3 w-3 bg-shimmer animate-shimmer rounded-full"></div>
65+
<div className="h-4 w-16 bg-shimmer animate-shimmer rounded"></div>
66+
</div>
67+
<div className="flex space-x-4">
68+
<div className="flex items-center space-x-1">
69+
<div className="h-4 w-4 bg-shimmer animate-shimmer rounded"></div>
70+
<div className="h-4 w-8 bg-shimmer animate-shimmer rounded"></div>
71+
</div>
72+
<div className="flex items-center space-x-1">
73+
<div className="h-4 w-4 bg-shimmer animate-shimmer rounded"></div>
74+
<div className="h-4 w-8 bg-shimmer animate-shimmer rounded"></div>
75+
</div>
76+
</div>
77+
</div>
78+
79+
{/* Topics */}
80+
<div className="flex flex-wrap gap-2 mb-4">
81+
<div className="h-6 w-20 bg-shimmer animate-shimmer rounded-full"></div>
82+
<div className="h-6 w-16 bg-shimmer animate-shimmer rounded-full"></div>
83+
<div className="h-6 w-24 bg-shimmer animate-shimmer rounded-full"></div>
84+
</div>
85+
86+
{/* Action Button */}
87+
<div className="h-10 w-full bg-shimmer animate-shimmer rounded-md"></div>
88+
</div>
89+
))}
90+
</div>
91+
</div>
92+
93+
{/* Pagination Skeleton */}
94+
<div className="flex justify-center items-center space-x-2 py-8">
95+
<div className="h-10 w-20 bg-shimmer animate-shimmer rounded-md"></div>
96+
<div className="flex space-x-1">
97+
{Array.from({ length: 5 }).map((_, index) => (
98+
<div
99+
key={index}
100+
className="h-10 w-10 bg-shimmer animate-shimmer rounded-md"
101+
></div>
102+
))}
103+
</div>
104+
<div className="h-10 w-20 bg-shimmer animate-shimmer rounded-md"></div>
105+
</div>
106+
</div>
107+
</>
108+
);
109+
}

‎src/app/(public)/repos/page.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,7 @@ import type { RepoResponse, RepoData, RepoItem, SearchParams } from '@/types';
1414

1515
export default async function ReposPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
1616
const sp = await searchParams;
17-
const raw: string[] = Array.isArray(sp.l) ? sp.l : sp.l ? [String(sp.l)] : [];
18-
19-
const langs = raw
20-
.flatMap(r => r.split(',')) // handles comma-separated and multi params
21-
.map(s => decodeURIComponent(s.trim()))
22-
.filter(Boolean);
17+
const langs: string[] = Array.isArray(sp.l) ? sp.l : sp.l ? [String(sp.l)] : [];
2318

2419
const reposRes = await getRepos(langs, sp);
2520
if (!reposRes) notFound();

0 commit comments

Comments
 (0)