vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-13 20:10:07 +02:00
Code Issues Packages Projects Releases Wiki Activity

set debounce / viewport for images used in the app

Browse Source
This commit is contained in:
jeffvli
2026-01-28 19:49:37 -08:00
parent 23990b581b
commit bd34a729b3
10 changed files with 39 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/image/image.tsx
+12 -8
View File
@@ -94,11 +94,13 @@ export function BaseImage({
);
}
const { className: containerPropsClassName, ...restContainerProps } = imageContainerProps || {};
return (
<ImageContainer
className={containerClassName}
className={clsx(containerClassName, containerPropsClassName)}
enableAnimation={enableAnimation}
{...imageContainerProps}
{...restContainerProps}
>
{src ? (
<Img
@@ -140,14 +142,15 @@ function ImageWithDebounce({
const [debouncedSrc] = useDebouncedValue(src, 150, { waitForInitial: true });
const viewport = useInViewport();
const { inViewport, ref } = enableViewport ? viewport : { inViewport: true, ref: undefined };
const { className: containerPropsClassName, ...restContainerProps } = imageContainerProps || {};
if (enableViewport) {
return (
<ImageContainer
className={containerClassName}
className={clsx(containerClassName, containerPropsClassName)}
enableAnimation={enableAnimation}
ref={ref}
{...imageContainerProps}
{...restContainerProps}
>
{inViewport && debouncedSrc ? (
<Img
@@ -177,9 +180,9 @@ function ImageWithDebounce({
return (
<ImageContainer
className={containerClassName}
className={clsx(containerClassName, containerPropsClassName)}
enableAnimation={enableAnimation}
{...imageContainerProps}
{...restContainerProps}
>
{debouncedSrc ? (
<Img
@@ -219,13 +222,14 @@ function ImageWithViewport({
...props
}: ImageProps) {
const { inViewport, ref } = useInViewport();
const { className: containerPropsClassName, ...restContainerProps } = imageContainerProps || {};
return (
<ImageContainer
className={containerClassName}
className={clsx(containerClassName, containerPropsClassName)}
enableAnimation={enableAnimation}
ref={ref}
{...imageContainerProps}
{...restContainerProps}
>
{inViewport && src ? (
<Img