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