wah.su/wahs.wah.su
1
0
Fork 0
mirror of https://github.com/wah-su/wahs.wah.su.git synced 2025-09-14 10:23:50 +05:00
Code Issues Projects Releases Packages Wiki Activity

refactor image loading

Browse source
This commit is contained in:
Kentai Radiquum 2025-01-31 23:22:19 +05:00
parent a836d24d9f
commit 889c8c0d37
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
6 changed files with 86 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/templates/Components/PlaceHolder.tsx
View file

@ -1,5 +1,4 @@
export default function Placeholder(props: {
idx: string | number;
isMobileHidden?: boolean;
}) {
return (
@ -10,7 +9,7 @@ export default function Placeholder(props: {
}`}
>
<div
id={`placeholder__image-${props.idx}-loader`}
data-type="placeholder__image__loader"
className="w-full h-full absolute inset-0 bg-gray-400 opacity-30 animate-pulse z-[3]"
></div>
</a>

4
src/templates/index.tsx
View file

@ -9,8 +9,8 @@ export default function IndexPage() {
id="index_images"
className="mt-4 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-4"
>
{[1, 2, 3, 4, 5, 6, 7].map((idx) => {
return <Placeholder key={`placeholder__image-${idx}`} idx={idx} isMobileHidden={idx > 5} />;
{[...Array(7).keys()].map((idx) => {
return <Placeholder key={`placeholder__image-${idx}`} isMobileHidden={idx > 4} />;
})}
<AllLink location="/images/" text="View All Images" />
</div>