priority ids

package.json

@@ -75,5 +75,8 @@
     "workspaces": [
         "packages/*"
     ],
-    "packageManager": "[email protected]"
+    "packageManager": "[email protected]",
+    "dependencies": {
+        "node-gyp": "^11.0.0"
+    }
 }

packages/react-components/package.json

@@ -29,7 +29,6 @@
         "@storybook/addon-links": "^7.1.1",
         "@storybook/addon-onboarding": "^1.0.8",
         "@storybook/addon-viewport": "7.1.1",
-        "@storybook/addons": "^7.1.1",
         "@storybook/blocks": "^7.1.1",
         "@storybook/react": "^7.1.1",
         "@storybook/react-vite": "^7.1.0",

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, { ComponentProps, ElementType, PureComponent } from 'react'
+import React, { ElementType, PureComponent } from 'react'
 import styled from 'styled-components'
 import { debounce } from 'throttle-debounce'
 import ObserverShared from '../util/observer'
@@ -64,7 +64,6 @@ type Props = {
     borderRadius?: number
     tabIndex?: number
     loaderConfig?: IntersectionObserverInit
-    fetchPriority?: ComponentProps<typeof Gif>[`fetchPriority`]
 } & EventProps
 
 const defaultProps = Object.freeze({ gutter: 6, user: {}, initialGifs: [] })
@@ -145,7 +144,6 @@ class Carousel extends PureComponent<Props, State> {
             borderRadius,
             tabIndex = 0,
             loaderConfig,
-            fetchPriority,
         } = this.props
         const { gifs, isDoneFetching } = this.state
         const showLoader = !isDoneFetching
@@ -173,7 +171,6 @@ class Carousel extends PureComponent<Props, State> {
                                 noLink={noLink}
                                 borderRadius={borderRadius}
                                 backgroundColor={backgroundColor}
-                                fetchPriority={fetchPriority}
                             />
                         )
                     })}

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

@@ -77,9 +77,7 @@ type GifProps = {
     borderRadius?: number
     tabIndex?: number
     style?: any
-    // issues with this will be resolved in the next React release:
-    // https://github.com/facebook/react/issues/27233
-    fetchPriority?: 'auto' | 'high' | 'low'
+    priority?: boolean
 }
 
 type Props = GifProps & EventProps
@@ -120,14 +118,15 @@ const Gif = ({
     borderRadius = 4,
     style,
     tabIndex,
+    priority,
 }: Props) => {
     // only fire seen once per gif id
     const [hasFiredSeen, setHasFiredSeen] = useState(false)
     // hovered is for the gif overlay
     const [isHovered, setHovered] = useState(false)
     // only show the gif if it's on the screen
     // if we can't use the dom (SSR), then we show the gif by default
-    const [shouldShowMedia, setShouldShowMedia] = useState(!canUseDOM)
+    const [shouldShowMedia, setShouldShowMedia] = useState(!canUseDOM || priority)
     // classname to target animations on image load
     const [loadedClassname, setLoadedClassName] = useState('')
     // the background color shouldn't change unless it comes from a prop or we have a sticker

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, { ComponentProps, ElementType, GetDerivedStateFromProps, PureComponent } from 'react'
+import React, { ElementType, GetDerivedStateFromProps, PureComponent } from 'react'
 import styled from 'styled-components'
 import { debounce } from 'throttle-debounce'
 import Observer from '../util/observer'
@@ -35,7 +35,7 @@ type Props = {
     tabIndex?: number
     loaderConfig?: IntersectionObserverInit
     loader?: ElementType
-    fetchPriority?: ComponentProps<typeof Gif>[`fetchPriority`]
+    priorityIds?: IGif['id'][]
 } & EventProps
 
 const Loader = styled.div<{ $isFirstLoad: boolean }>`
@@ -172,7 +172,7 @@ class Grid extends PureComponent<Props, State> {
             tabIndex = 0,
             layoutType = 'GRID',
             loader: LoaderVisual = DotsLoader,
-            fetchPriority,
+            priorityIds,
         } = this.props
         const { gifs, isError, isDoneFetching } = this.state
 
@@ -230,7 +230,7 @@ class Grid extends PureComponent<Props, State> {
                                         hideAttribution={hideAttribution}
                                         noLink={noLink}
                                         borderRadius={borderRadius}
-                                        fetchPriority={fetchPriority}
+                                        priority={priorityIds?.includes(gif.id)}
                                     />
                                 ))}
                             </div>

packages/react-components/src/components/pingback-context-manager.tsx

@@ -1,5 +1,5 @@
 import { mergeAttributes, PingbackAttributes } from '@giphy/js-analytics'
-import React, { createContext, FC, useContext, ReactNode } from 'react'
+import React, { createContext, ReactNode, useContext } from 'react'
 
 type PingbackContextProps = {
     attributes: PingbackAttributes
@@ -9,10 +9,14 @@ type PingbackContextProps = {
 export const PingbackContext = createContext({} as PingbackContextProps)
 
 // aggrigate attributes
-const PingbackContextManager: FC<PingbackContextProps> = ({ attributes, children }) => {
+const PingbackContextManager = ({ attributes, children }: { attributes: PingbackAttributes; children: ReactNode }) => {
     const { attributes: parentAttributes = {} } = useContext(PingbackContext)
     return (
-        <PingbackContext.Provider value={{ attributes: mergeAttributes(parentAttributes, attributes, 'layout_type') }}>
+        <PingbackContext.Provider
+            value={{
+                attributes: mergeAttributes(parentAttributes, attributes, 'layout_type'),
+            }}
+        >
             {children}
         </PingbackContext.Provider>
     )