strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add spinner to loading photo thumbs

Browse Source
This commit is contained in:
Sam Becker 2025-01-20 13:33:12 -06:00
parent c7576b43ac
commit 8518bd216c
1 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/photo/PhotoMedium.tsx
View File

@ -13,6 +13,7 @@ import { SHOULD_PREFETCH_ALL_LINKS } from '@/site/config';
import { useRef } from 'react';
import useOnVisible from '@/utility/useOnVisible';
import LinkWithStatus from '@/components/LinkWithStatus';
import Spinner from '@/components/Spinner';
export default function PhotoMedium({
photo,
@ -48,16 +49,27 @@ export default function PhotoMedium({
)}
prefetch={prefetch}
>
<ImageMedium
src={photo.url}
aspectRatio={photo.aspectRatio}
blurDataURL={photo.blurData}
blurCompatibilityMode={doesPhotoNeedBlurCompatibility(photo)}
className="flex object-cover w-full h-full"
imgClassName="object-cover w-full h-full"
alt={altTextForPhoto(photo)}
priority={priority}
/>
{({ isLoading }) =>
<div>
{isLoading &&
<div className={clsx(
'absolute inset-0 flex items-center justify-center',
'text-white bg-black/25',
'z-10',
)}>
<Spinner size={20} color="text" />
</div>}
<ImageMedium
src={photo.url}
aspectRatio={photo.aspectRatio}
blurDataURL={photo.blurData}
blurCompatibilityMode={doesPhotoNeedBlurCompatibility(photo)}
className="flex object-cover w-full h-full "
imgClassName="object-cover w-full h-full"
alt={altTextForPhoto(photo)}
priority={priority}
/>
</div>}
</LinkWithStatus>
);
};