clean up

Giphy · Jan 31, 2025 · 40a3569 · 40a3569
1 parent f7f319b
commit 40a3569
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 45 deletions.
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -34,8 +34,8 @@
         "@storybook/storybook-deployer": "^2.8.16",
         "@storybook/test": "^8.5.2",
         "@storybook/theming": "^8.5.2",
-        "@types/react": "^18.2.79",
-        "@types/react-dom": "^18.2.25",
+        "@types/react": "^18.3.18",
+        "@types/react-dom": "^18.3.5",
         "@types/throttle-debounce": "^5.0.2",
         "cypress": "14.0.1",
         "fetch-mock": "^9.11.0",

diff --git a/packages/react-components/src/components/gif.tsx b/packages/react-components/src/components/gif.tsx
@@ -77,8 +77,7 @@ type GifProps = {
     borderRadius?: number
     tabIndex?: number
     style?: any
-    eager?: boolean
-    priority?: boolean
+    eagerLoading?: boolean
 }
 
 type Props = GifProps & EventProps
@@ -119,16 +118,15 @@ const Gif = ({
     borderRadius = 4,
     style,
     tabIndex,
-    eager,
-    priority,
+    eagerLoading,
 }: 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 || eager || priority)
+    const [shouldShowMedia, setShouldShowMedia] = useState(!canUseDOM || eagerLoading)
     // 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

diff --git a/packages/react-components/src/components/grid.tsx b/packages/react-components/src/components/grid.tsx
@@ -35,7 +35,7 @@ type Props = {
     tabIndex?: number
     loaderConfig?: IntersectionObserverInit
     loader?: ElementType
-    priorityIds?: IGif['id'][]
+    eagerLoading?: 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,
-            priorityIds,
+            eagerLoading,
         } = this.props
         const { gifs, isError, isDoneFetching } = this.state
 
@@ -230,7 +230,7 @@ class Grid extends PureComponent<Props, State> {
                                         hideAttribution={hideAttribution}
                                         noLink={noLink}
                                         borderRadius={borderRadius}
-                                        priority={priorityIds?.includes(gif.id)}
+                                        eagerLoading={eagerLoading?.includes(gif.id)}
                                     />
                                 ))}
                             </div>

diff --git a/packages/react-components/stories/grid.stories.tsx b/packages/react-components/stories/grid.stories.tsx
@@ -67,7 +67,7 @@ const Grid = ({ loader, containerStyles, columns, limit = 10, ...other }: GridPr
                     <GridComponent
                         key={term}
                         width={width}
-                        columns={columns || width < 500 ? 2 : 3}
+                        columns={columns || (width < 500 ? 2 : 3)}
                         noResultsMessage={NoResults}
                         loader={loader}
                         fetchGifs={fetchGifs}
@@ -104,7 +104,11 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const GridStory: Story = {}
+export const GridStory: Story = {
+    args: {
+        eagerLoading: ['l0IylOPCNkiqOgMyA', 'l0IykOsxLECVejOzm'],
+    },
+}
 
 export const GridResponsive: Story = {
     args: {

diff --git a/yarn.lock b/yarn.lock
@@ -2803,8 +2803,8 @@ __metadata:
     "@storybook/storybook-deployer": ^2.8.16
     "@storybook/test": ^8.5.2
     "@storybook/theming": ^8.5.2
-    "@types/react": ^18.2.79
-    "@types/react-dom": ^18.2.25
+    "@types/react": ^18.3.18
+    "@types/react-dom": ^18.3.5
     "@types/throttle-debounce": ^5.0.2
     cypress: 14.0.1
     fetch-mock: ^9.11.0
@@ -4761,9 +4761,9 @@ __metadata:
   linkType: hard
 
 "@types/prop-types@npm:*":
-  version: 15.7.5
-  resolution: "@types/prop-types@npm:15.7.5"
-  checksum: 5b43b8b15415e1f298243165f1d44390403bb2bd42e662bca3b5b5633fdd39c938e91b7fce3a9483699db0f7a715d08cef220c121f723a634972fdf596aec980
+  version: 15.7.14
+  resolution: "@types/prop-types@npm:15.7.14"
+  checksum: d0c5407b9ccc3dd5fae0ccf9b1007e7622ba5e6f1c18399b4f24dff33619d469da4b9fa918a374f19dc0d9fe6a013362aab0b844b606cfc10676efba3f5f736d
   languageName: node
   linkType: hard
 
@@ -4781,33 +4781,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^18.2.25":
-  version: 18.2.25
-  resolution: "@types/react-dom@npm:18.2.25"
-  dependencies:
-    "@types/react": "*"
-  checksum: 85f9278d6456c6cdc76da6806a33b472588cdd029b08dde32e8b5636b25a3eae529b4ac2e08c848a3d7ca44e4e97ee9a3df406c96fa0768de935c8eed6e07590
-  languageName: node
-  linkType: hard
-
-"@types/react@npm:*":
-  version: 18.2.15
-  resolution: "@types/react@npm:18.2.15"
-  dependencies:
-    "@types/prop-types": "npm:*"
-    "@types/scheduler": "npm:*"
-    csstype: "npm:^3.0.2"
-  checksum: 36989f638201bfe2f4110b06c119180f6df9c0e13d7060481e82e7a745f81745a01ae543c478a25b61e0767cb52e82da2ad5b0dedacabf99339e523d06176705
+"@types/react-dom@npm:^18.3.5":
+  version: 18.3.5
+  resolution: "@types/react-dom@npm:18.3.5"
+  peerDependencies:
+    "@types/react": ^18.0.0
+  checksum: 95c757684f71e761515c5a11299e5feec550c72bb52975487f360e6f0d359b26454c26eaf2ce45dd22748205aa9b2c2fe0abe7005ebcbd233a7615283ac39a7d
   languageName: node
   linkType: hard
 
-"@types/react@npm:^18.2.79":
-  version: 18.2.79
-  resolution: "@types/react@npm:18.2.79"
+"@types/react@npm:^18.3.18":
+  version: 18.3.18
+  resolution: "@types/react@npm:18.3.18"
   dependencies:
     "@types/prop-types": "*"
     csstype: ^3.0.2
-  checksum: 85aa96e0e88725c84d8fc5f04f10a4da6a1f507dde33557ac9cc211414756867721264bfefd9e02bae1288ce2905351d949b652b931e734ea24519ee5c625138
+  checksum: 5933597bc9f53e282f0438f0bb76d0f0fab60faabe760ea806e05ffe6f5c61b9b4d363e1a03a8fea47c510d493c6cf926cdeeba9f7074fa97b61940c350245e7
   languageName: node
   linkType: hard
 
@@ -4818,13 +4807,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/scheduler@npm:*":
-  version: 0.16.3
-  resolution: "@types/scheduler@npm:0.16.3"
-  checksum: 2b0aec39c24268e3ce938c5db2f2e77f5c3dd280e05c262d9c2fe7d890929e4632a6b8e94334017b66b45e4f92a5aa42ba3356640c2a1175fa37bef2f5200767
-  languageName: node
-  linkType: hard
-
 "@types/semver@npm:^7.3.12, @types/semver@npm:^7.5.0":
   version: 7.5.0
   resolution: "@types/semver@npm:7.5.0"