Feat/react components fetch priority

.changeset/ten-jeans-clap.md

@@ -0,0 +1,5 @@
+---
+'@giphy/react-components': minor
+---
+
+add fetchpriority prop to Gif component

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<typeof Gif>[`fetchPriority`]
 } & EventProps
 
 const defaultProps = Object.freeze({ gutter: 6, user: {}, initialGifs: [] })
@@ -144,6 +145,7 @@ class Carousel extends PureComponent<Props, State> {
             borderRadius,
             tabIndex = 0,
             loaderConfig,
+            fetchPriority,
         } = this.props
         const { gifs, isDoneFetching } = this.state
         const showLoader = !isDoneFetching
@@ -171,6 +173,7 @@ class Carousel extends PureComponent<Props, State> {
                                 noLink={noLink}
                                 borderRadius={borderRadius}
                                 backgroundColor={backgroundColor}
+                                fetchPriority={fetchPriority}
                             />
                         )
                     })}

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 = ({
                 <img
                     ref={image}
                     suppressHydrationWarning
+                    // @ts-ignore - fetchPriority is not recognized by React typescript
+                    // eslint-disable-next-line react/no-unknown-property
+                    fetchPriority={fetchPriority}
                     className={[Gif.imgClassName, loadedClassname].join(' ')}
                     src={shouldShowMedia ? rendition.url : placeholder}
                     style={{ background }}

packages/react-components/src/components/grid.tsx

@@ -2,7 +2,7 @@
 import { gifPaginator, GifsResult } from '@giphy/js-fetch-api'
 import { IGif, IUser } from '@giphy/js-types'
 import { getGifHeight } from '@giphy/js-util'
-import React, { ElementType, GetDerivedStateFromProps, PureComponent } from 'react'
+import React, { ComponentProps, ElementType, GetDerivedStateFromProps, PureComponent } from 'react'
 import styled from 'styled-components'
 import { debounce } from 'throttle-debounce'
 import Observer from '../util/observer'
@@ -35,6 +35,7 @@ type Props = {
     tabIndex?: number
     loaderConfig?: IntersectionObserverInit
     loader?: ElementType
+    fetchPriority?: ComponentProps<typeof Gif>[`fetchPriority`]
 } & EventProps
 
 const Loader = styled.div<{ $isFirstLoad: boolean }>`
@@ -152,6 +153,7 @@ class Grid extends PureComponent<Props, State> {
             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<Props, State> {
                                 hideAttribution={hideAttribution}
                                 noLink={noLink}
                                 borderRadius={borderRadius}
+                                fetchPriority={fetchPriority}
                             />
                         ))}
                     </MasonryGrid>