forked from vercel/next.js
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix duplicate image src causing canceled request (vercel#33776)
In PR vercel#26968, we added Set of loaded images that was removed in vercel#33474 erroneously. We still need to track loaded images since we can't rely on `img.complete`, especially if the parent uses `react-virtualized`. Tested on https://nextjs.org/showcase
- Loading branch information
Showing
9 changed files
with
169 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
34 changes: 34 additions & 0 deletions
34
test/integration/image-component/react-virtualized/pages/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import Image from 'next/image' | ||
| import img from '../public/test.jpg' | ||
| import { WindowScroller, List as VirtualizedList } from 'react-virtualized' | ||
|
|
||
| export default function Home() { | ||
| return ( | ||
| <div> | ||
| <WindowScroller serverHeight={800}> | ||
| {({ height, isScrolling, onChildScroll, scrollTop }) => ( | ||
| <VirtualizedList | ||
| autoHeight | ||
| height={height} | ||
| isScrolling={isScrolling} | ||
| onScroll={onChildScroll} | ||
| scrollTop={scrollTop} | ||
| width={810} | ||
| rowCount={5} | ||
| estimatedRowSize={10} | ||
| rowHeight={400} | ||
| rowRenderer={() => { | ||
| return ( | ||
| <div> | ||
| <Image src={img} placeholder="blur" className="thumbnail" /> | ||
| <Image src={img} className="large" /> | ||
| </div> | ||
| ) | ||
| }} | ||
| overscanRowCount={0} | ||
| /> | ||
| )} | ||
| </WindowScroller> | ||
| </div> | ||
| ) | ||
| } |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
78 changes: 78 additions & 0 deletions
78
test/integration/image-component/react-virtualized/test/index.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| /* eslint-env jest */ | ||
|
|
||
| import { | ||
| findPort, | ||
| killApp, | ||
| nextBuild, | ||
| nextStart, | ||
| waitFor, | ||
| } from 'next-test-utils' | ||
| import webdriver from 'next-webdriver' | ||
| import httpProxy from 'http-proxy' | ||
| import { join } from 'path' | ||
| import { remove } from 'fs-extra' | ||
| import http from 'http' | ||
|
|
||
| const appDir = join(__dirname, '../') | ||
| let appPort | ||
| let app | ||
| let proxyServer | ||
| let cancelCount = 0 | ||
| describe('react-virtualized wrapping next/image', () => { | ||
| describe('production', () => { | ||
| beforeAll(async () => { | ||
| await remove(join(appDir, '.next')) | ||
| await nextBuild(appDir) | ||
| const port = await findPort() | ||
| app = await nextStart(appDir, port) | ||
| appPort = await findPort() | ||
|
|
||
| const proxy = httpProxy.createProxyServer({ | ||
| target: `http://localhost:${port}`, | ||
| }) | ||
|
|
||
| proxyServer = http.createServer(async (req, res) => { | ||
| let isComplete = false | ||
|
|
||
| if (req.url.startsWith('/_next/image')) { | ||
| req.on('close', () => { | ||
| if (!isComplete) { | ||
| cancelCount++ | ||
| } | ||
| }) | ||
| console.log('stalling request for', req.url) | ||
| await waitFor(3000) | ||
| isComplete = true | ||
| } | ||
| proxy.web(req, res) | ||
| }) | ||
|
|
||
| proxy.on('error', (err) => { | ||
| console.warn('Failed to proxy', err) | ||
| }) | ||
|
|
||
| await new Promise((resolve) => { | ||
| proxyServer.listen(appPort, () => resolve()) | ||
| }) | ||
| }) | ||
| afterAll(async () => { | ||
| proxyServer.close() | ||
| await killApp(app) | ||
| }) | ||
|
|
||
| it('should not cancel requests for images', async () => { | ||
| // TODO: this test doesnt work unless we can set `disableCache: true` | ||
| let browser = await webdriver(appPort, '/', undefined, undefined, true) | ||
| expect(cancelCount).toBe(0) | ||
| await browser.eval('window.scrollTo({ top: 100, behavior: "smooth" })') | ||
| await waitFor(100) | ||
| expect(cancelCount).toBe(0) | ||
| await browser.eval('window.scrollTo({ top: 200, behavior: "smooth" })') | ||
| await waitFor(200) | ||
| expect(cancelCount).toBe(0) | ||
| await browser.eval('window.scrollTo({ top: 300, behavior: "smooth" })') | ||
| await waitFor(300) | ||
| expect(cancelCount).toBe(0) | ||
| }) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters