diff --git a/src/components/Image/index.tsx b/src/components/Image/index.tsx index eba4272c..a1ffb055 100644 --- a/src/components/Image/index.tsx +++ b/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 = memo(props => { - const [imageSrc, setImageSrc] = useState<[string, string]>([null, null]) const ref = useRef() const onLoad = useCallback((event) => { event.target.classList.add('loaded') @@ -22,43 +21,6 @@ export const Image: React.FC = 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 ( = memo(props => { className={'image'} style={props.style} alt={props.alt} - src={imageSrc[0]} - srcSet={imageSrc[1]} + src={props.src} + srcSet={props.srcSet} /> ) }) diff --git a/src/components/Image/styles.css b/src/components/Image/styles.css index d0d2b622..7a0f7512 100644 --- a/src/components/Image/styles.css +++ b/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; } diff --git a/src/components/PageGrid/index.tsx b/src/components/PageGrid/index.tsx index 9efe7658..dd2b308d 100644 --- a/src/components/PageGrid/index.tsx +++ b/src/components/PageGrid/index.tsx @@ -4,58 +4,84 @@ 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 = 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 ( - - {props.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 srcSet = imageSrcSet(src, [ImageSize.large, ImageSize.medium, ImageSize.small]) + <> + + {items.map((item, i) => { + const gridColumn = item.featured ? 'span 2' : 'auto' + const layout: CardLayout = item.featured ? 'featured' : 'simple' + 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 - ? ( - + {item.title} + + {item.date} + + ) : ( + item.title + ) + + return ( + - {item.title} - - {item.date} - - ) : ( - item.title + {content} + ) - - return ( - - {content} - - ) - })} - + })} + + + + + + + ) }