From 40a35693428439bb493902a8eeca428ebacaf222 Mon Sep 17 00:00:00 2001 From: Gianni Ferullo Date: Fri, 31 Jan 2025 12:08:51 -0500 Subject: [PATCH] clean up --- packages/react-components/package.json | 4 +- .../react-components/src/components/gif.tsx | 8 ++-- .../react-components/src/components/grid.tsx | 6 +-- .../react-components/stories/grid.stories.tsx | 8 +++- yarn.lock | 48 ++++++------------- 5 files changed, 29 insertions(+), 45 deletions(-) diff --git a/packages/react-components/package.json b/packages/react-components/package.json index 6467c66e..44b8dd68 100644 --- 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 index 73c48715..d467ffea 100644 --- 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,8 +118,7 @@ const Gif = ({ borderRadius = 4, style, tabIndex, - eager, - priority, + eagerLoading, }: Props) => { // only fire seen once per gif id const [hasFiredSeen, setHasFiredSeen] = useState(false) @@ -128,7 +126,7 @@ const Gif = ({ 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 index 9cb55537..18086d5f 100644 --- 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 { 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 { hideAttribution={hideAttribution} noLink={noLink} borderRadius={borderRadius} - priority={priorityIds?.includes(gif.id)} + eagerLoading={eagerLoading?.includes(gif.id)} /> ))} diff --git a/packages/react-components/stories/grid.stories.tsx b/packages/react-components/stories/grid.stories.tsx index 341eaae3..22af0768 100644 --- 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 -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 index e833e7d2..19dbc51f 100644 --- 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"