From 581f5bf250ee9851a7989d260c718df2030c9f6c Mon Sep 17 00:00:00 2001 From: Gianni Ferullo Date: Thu, 1 Feb 2024 12:24:30 -0800 Subject: [PATCH 1/3] react-components: fetchPriority flag for the gif component --- packages/react-components/src/components/carousel.tsx | 5 ++++- packages/react-components/src/components/gif.tsx | 5 +++++ packages/react-components/src/components/grid.tsx | 5 ++++- 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/react-components/src/components/carousel.tsx b/packages/react-components/src/components/carousel.tsx index 9b659420..918edf46 100644 --- a/packages/react-components/src/components/carousel.tsx +++ b/packages/react-components/src/components/carousel.tsx @@ -2,7 +2,7 @@ import { gifPaginator, GifsResult } from '@giphy/js-fetch-api' import { IGif, IUser } from '@giphy/js-types' import { getGifWidth } from '@giphy/js-util' -import React, { ElementType, PureComponent } from 'react' +import React, { ComponentProps, ElementType, PureComponent } from 'react' import styled from 'styled-components' import { debounce } from 'throttle-debounce' import ObserverShared from '../util/observer' @@ -64,6 +64,7 @@ type Props = { borderRadius?: number tabIndex?: number loaderConfig?: IntersectionObserverInit + fetchPriority?: ComponentProps[`fetchPriority`] } & EventProps const defaultProps = Object.freeze({ gutter: 6, user: {}, initialGifs: [] }) @@ -144,6 +145,7 @@ class Carousel extends PureComponent { borderRadius, tabIndex = 0, loaderConfig, + fetchPriority, } = this.props const { gifs, isDoneFetching } = this.state const showLoader = !isDoneFetching @@ -171,6 +173,7 @@ class Carousel extends PureComponent { noLink={noLink} borderRadius={borderRadius} backgroundColor={backgroundColor} + fetchPriority={fetchPriority} /> ) })} diff --git a/packages/react-components/src/components/gif.tsx b/packages/react-components/src/components/gif.tsx index f35efc80..5fa6d2c7 100644 --- a/packages/react-components/src/components/gif.tsx +++ b/packages/react-components/src/components/gif.tsx @@ -64,6 +64,7 @@ type GifProps = { borderRadius?: number tabIndex?: number style?: any + fetchPriority?: 'auto' | 'high' | 'low' } type Props = GifProps & EventProps @@ -102,6 +103,7 @@ const Gif = ({ borderRadius = 4, style, tabIndex, + fetchPriority, }: Props) => { // only fire seen once per gif id const [hasFiredSeen, setHasFiredSeen] = useState(false) @@ -273,6 +275,9 @@ const Gif = ({ [`fetchPriority`] } & EventProps const Loader = styled.div<{ $isFirstLoad: boolean }>` @@ -152,6 +153,7 @@ class Grid extends PureComponent { tabIndex = 0, layoutType = 'GRID', loader: LoaderVisual = DotsLoader, + fetchPriority, } = this.props const { gifWidth, gifs, isError, isDoneFetching } = this.state const showLoader = !isDoneFetching @@ -186,6 +188,7 @@ class Grid extends PureComponent { hideAttribution={hideAttribution} noLink={noLink} borderRadius={borderRadius} + fetchPriority={fetchPriority} /> ))} From 6534ea6772b1754379b64f108850aa20ba453f2e Mon Sep 17 00:00:00 2001 From: Gianni Ferullo Date: Thu, 1 Feb 2024 12:25:33 -0800 Subject: [PATCH 2/3] changeset --- .changeset/ten-jeans-clap.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/ten-jeans-clap.md diff --git a/.changeset/ten-jeans-clap.md b/.changeset/ten-jeans-clap.md new file mode 100644 index 00000000..881d4186 --- /dev/null +++ b/.changeset/ten-jeans-clap.md @@ -0,0 +1,5 @@ +--- +'@giphy/react-components': minor +--- + +add fetchpriority prop to Gif component From ce8bb015b54542dc1ae56bfec70ba55da18d49c5 Mon Sep 17 00:00:00 2001 From: Gianni Ferullo Date: Thu, 1 Feb 2024 12:47:49 -0800 Subject: [PATCH 3/3] update comment --- packages/react-components/src/components/gif.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/src/components/gif.tsx b/packages/react-components/src/components/gif.tsx index 5fa6d2c7..6f2aa13d 100644 --- a/packages/react-components/src/components/gif.tsx +++ b/packages/react-components/src/components/gif.tsx @@ -275,7 +275,7 @@ const Gif = ({