PageGrid chunks; Image lazy removed (unstable in Safari)

src/components/Image/index.tsx

@@ -1,5 +1,5 @@
 import './styles.css'
-import { memo, useRef, useState, useEffect, useCallback } from 'react'
+import { memo, useRef, useEffect, useCallback } from 'react'
 
 export type ImageProps = {
     style?: React.CSSProperties
@@ -9,7 +9,6 @@ export type ImageProps = {
 }
 
 export const Image: React.FC<ImageProps> = memo(props => {
-    const [imageSrc, setImageSrc] = useState<[string, string]>([null, null])
     const ref = useRef<HTMLImageElement>()
     const onLoad = useCallback((event) => {
         event.target.classList.add('loaded')
@@ -22,43 +21,6 @@ export const Image: React.FC<ImageProps> = memo(props => {
         }
     })
 
-    useEffect(() => {
-        let observer: IntersectionObserver
-        let didCancel = false
-
-        if (ref.current && imageSrc[0] !== props.src) {
-            if (IntersectionObserver) {
-                observer = new IntersectionObserver(
-                    entries => {
-                        entries.forEach(entry => {
-                            if (
-                                !didCancel &&
-                                (entry.intersectionRatio > 0 || entry.isIntersecting)
-                            ) {
-                                setImageSrc([props.src, props.srcSet])
-                                observer.unobserve(ref.current)
-                            }
-                        })
-                    },
-                    {
-                        threshold: 0.01,
-                        rootMargin: "75%",
-                    }
-                )
-                observer.observe(ref.current)
-            } else {
-                // Old browsers fallback
-                setImageSrc([props.src, props.srcSet])
-            }
-        }
-        return () => {
-            didCancel = true
-            if (observer && observer.unobserve) {
-                observer.unobserve(ref.current)
-            }
-        }
-    }, [props.src, props.srcSet, imageSrc, ref])
-
     return (
         <img
             ref={ref}
@@ -66,8 +28,8 @@ export const Image: React.FC<ImageProps> = memo(props => {
             className={'image'}
             style={props.style}
             alt={props.alt}
-            src={imageSrc[0]}
-            srcSet={imageSrc[1]}
+            src={props.src}
+            srcSet={props.srcSet}
         />
     )
 })

src/components/Image/styles.css

@@ -1,12 +1,3 @@
-@keyframes loaded {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-
 .image {
     width: 100%;
     display: block;
@@ -17,6 +8,5 @@
 }
 
 .image.loaded {
-    animation: loaded 250ms ease-in-out;
     opacity: 1;
 }

src/components/PageGrid/index.tsx

@@ -4,23 +4,35 @@ import { Card, CardLayout } from '../Card'
 import { Date } from './Date'
 import { Block } from '../Block'
 import { Spacer } from '../Spacer'
-import { imageSrcSet } from 'src/lib/image'
+import { imageSrcSet, imageSrc } from 'src/lib/image'
+import { Button } from '../Button'
+import { useState, useCallback } from 'react'
 
 export type PageGridProps = {
     items: PageCardData[]
 }
 
 export const PageGrid: React.FC<PageGridProps> = props => {
+    const [page, setPage] = useState(1)
+    const i = page * 24
+    const items = props.items.slice(0, i)
+    const onMore = useCallback(() => {
+        setPage(x => x + 1)
+    }, [])
+    const hasMore = i < props.items.length
+
     return (
+        <>
             <CardGrid
                 style={{
                     marginBottom: 'var(--size-m)',
                 }}
             >
-            {props.items.map((item, i) => {
+                {items.map((item, i) => {
                     const gridColumn = item.featured ? 'span 2' : 'auto'
                     const layout: CardLayout = item.featured ? 'featured' : 'simple'
-                const src = item.coverSrc ?? process.env.APP_CARD_DEFAULT_IMAGE
+                    const cover = item.coverSrc ?? process.env.APP_CARD_DEFAULT_IMAGE
+                    const src = cover
                     const srcSet = imageSrcSet(src, [ImageSize.large, ImageSize.medium, ImageSize.small])
 
                     const content = !item.featured
@@ -57,5 +69,19 @@ export const PageGrid: React.FC<PageGridProps> = props => {
                     )
                 })}
             </CardGrid>
+            <Block direction={'horizontal'} style={{
+                marginTop: 'var(--size-l)'
+            }}>
+                <Spacer />
+                <Button
+                    disabled={!hasMore}
+                    onClick={onMore}
+                    style={{
+                        flex: 2,
+                    }}
+                >Загрузить ещё</Button>
+                <Spacer />
+            </Block>
+        </>
     )
 }