damien/neroshitron
1
0
Fork 0
mirror of https://github.com/D4M13N-D3V/neroshitron.git synced 2025-03-14 10:05:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: image skeletons

Browse Source
This commit is contained in:
Damien Ostler 2024-05-27 17:09:49 -04:00
parent e930b2ce73
commit 10f36e54ff
2 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/gallery/page.tsx
View File

@ -79,14 +79,14 @@ function PageComponent() {
return (
<div>
{/* <div className="fixed w-full h-full overflow-hidden z-0 animate-fade-left animate-fade-left animate-once animate-duration-[2000ms] animate-normal animate-fill-forwards">
<div className="fixed w-full h-full overflow-hidden z-0 animate-fade-left animate-fade-left animate-once animate-duration-[2000ms] animate-normal animate-fill-forwards">
<img
src="gallery_girl.png"
className="float-right object-cover h-screen w-6/6 md:w-5/6 lg:w-3/6 opacity-50 overflow-hidden"
alt="Background"
/>
</div> */}
<section className="neroshi-blue-900 flex items-center w-full p-8 pt-20 opacity-90">
</div>
<section className="neroshi-blue-900 flex items-center w-full p-8 pt-20 opacity-90 animate-in">
<div className="container mx-auto py-8">
<input
className=" w-full md:w-1/2 text-neroshi-blue-950 h-16 px-3 rounded mb-8 focus:outline-none focus:shadow-outline text-xl px-8 shadow-lg mx-auto"
@ -110,7 +110,7 @@ function PageComponent() {
</nav>
</div>
</section>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-60 gap-x-5 h-full mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-60 gap-x-5 h-full mx-auto animate-in">
{galleries && galleries.map((gallery, index) => (
<div className="mx-auto">
<GalleryThumbnail

4
components/ui/gallery_thumbnail.tsx
View File

@ -41,7 +41,7 @@ const GalleryThumbnail = ({ id, columns, onSelect, title,nsfw, subscription, tag
return (
<div className="py-3 sm:max-w-xl sm:mx-auto flex-3 animate-in">
<div className="h-48 overflow-visible w-full relative hover:scale-95 rounded-3xl">
{!isLoading && (
{!isLoading ? (
<>
<img
className={`aspect-content rounded-3xl`}
@ -93,6 +93,8 @@ const GalleryThumbnail = ({ id, columns, onSelect, title,nsfw, subscription, tag
</div>
</div>
</>
):(
<div className="animate-pulse bg-neroshi-blue-900 rounded-3xl" style={{ width: '20rem', height: '20rem' }}></div>
)}
</div>
</div>