Add delay to placeholder removal

[atcastle]

This PR introduces a delay of 1500 ms between the image ref callback and removing the blurry placeholder background. Previously, the background was getting removed after the image had loaded but before it was rendered, causing an ugly flash of white as the image appeared.
There shouldn't be any downside to this delay--the blurry placeholder is covered entirely by the image and therefore not visible after the image is rendered.

[wongmjane]

Will the delay be adjustable? Thanks!

[timneutkens]

Will the delay be adjustable? Thanks!

In general the background could even stick around but this is just a slight cleanup, the delay shouldn't need to be configured.

[ijjk]

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	atcastle/next.js image-placeholder-delay	Change
buildDuration	12.2s	12.4s	⚠️ +195ms
buildDurationCached	3s	3.1s	⚠️ +94ms
nodeModulesSize	46.5 MB	46.5 MB	⚠️ +479 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	atcastle/next.js image-placeholder-delay	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.441	2.445	0
/ avg req/sec	1024.05	1022.33	⚠️ -1.72
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.248	1.235	-0.01
/error-in-render avg req/sec	2003.48	2025.05	+21.57

Client Bundles (main, webpack, commons)

	vercel/next.js canary	atcastle/next.js image-placeholder-delay	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	✓
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	atcastle/next.js image-placeholder-delay	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	atcastle/next.js image-placeholder-delay	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.07 kB	3.07 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	333 B	333 B	✓
withRouter-HASH.js gzip	330 B	330 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	atcastle/next.js image-placeholder-delay	Change
_buildManifest.js gzip	392 B	392 B	✓
Overall change	392 B	392 B	✓

Rendered Page Sizes

	vercel/next.js canary	atcastle/next.js image-placeholder-delay	Change
index.html gzip	572 B	572 B	✓
link.html gzip	581 B	581 B	✓
withRouter.html gzip	568 B	568 B	✓
Overall change	1.72 kB	1.72 kB	✓

---

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	atcastle/next.js image-placeholder-delay	Change
buildDuration	13.9s	14.5s	⚠️ +644ms
buildDurationCached	4.1s	4s	-66ms
nodeModulesSize	46.5 MB	46.5 MB	⚠️ +479 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	atcastle/next.js image-placeholder-delay	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	✓
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	atcastle/next.js image-placeholder-delay	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	atcastle/next.js image-placeholder-delay	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.07 kB	3.07 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	333 B	333 B	✓
withRouter-HASH.js gzip	330 B	330 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	atcastle/next.js image-placeholder-delay	Change
_buildManifest.js gzip	392 B	392 B	✓
Overall change	392 B	392 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	atcastle/next.js image-placeholder-delay	Change
_error.js	16.9 kB	16.9 kB	✓
404.html	2.44 kB	2.44 kB	✓
500.html	2.43 kB	2.43 kB	✓
amp.amp.html	10.8 kB	10.8 kB	✓
amp.html	1.63 kB	1.63 kB	✓
css.html	1.81 kB	1.81 kB	✓
hooks.html	1.69 kB	1.69 kB	✓
index.js	17.2 kB	17.2 kB	⚠️ +2 B
link.js	17.4 kB	17.4 kB	✓
routerDirect.js	17.4 kB	17.4 kB	✓
withRouter.js	17.4 kB	17.4 kB	✓
Overall change	107 kB	107 kB	⚠️ +2 B

---

Webpack 4 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	atcastle/next.js image-placeholder-delay	Change
buildDuration	11.3s	10.9s	-431ms
buildDurationCached	4.5s	4.7s	⚠️ +187ms
nodeModulesSize	46.5 MB	46.5 MB	⚠️ +479 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	atcastle/next.js image-placeholder-delay	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.487	2.517	⚠️ +0.03
/ avg req/sec	1005.06	993.17	⚠️ -11.89
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.255	1.269	⚠️ +0.01
/error-in-render avg req/sec	1992.35	1969.85	⚠️ -22.5

Client Bundles (main, webpack, commons)

	vercel/next.js canary	atcastle/next.js image-placeholder-delay	Change
677f882d2ed8..HASH.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.99 kB	7.99 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	61.1 kB	61.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	atcastle/next.js image-placeholder-delay	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	atcastle/next.js image-placeholder-delay	Change
_app-HASH.js gzip	1.07 kB	1.07 kB	✓
_error-HASH.js gzip	3.74 kB	3.74 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
css-HASH.js gzip	339 B	339 B	✓
hooks-HASH.js gzip	887 B	887 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.63 kB	1.63 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	9.17 kB	9.17 kB	✓

Client Build Manifests

	vercel/next.js canary	atcastle/next.js image-placeholder-delay	Change
_buildManifest.js gzip	420 B	420 B	✓
Overall change	420 B	420 B	✓

Rendered Page Sizes

	vercel/next.js canary	atcastle/next.js image-placeholder-delay	Change
index.html gzip	626 B	626 B	✓
link.html gzip	632 B	632 B	✓
withRouter.html gzip	619 B	619 B	✓
Overall change	1.88 kB	1.88 kB	✓

Commit: 9f1ad75

[ijjk]

Failing test suites

Commit: 9f1ad75

test/integration/basic/test/index.test.js

• Basic Features > should polyfill Node.js modules

Expand output

● Basic Features › should polyfill Node.js modules

thrown: "Exceeded timeout of 300000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  35 |   afterAll(() => killApp(context.server))
  36 |
> 37 |   it('should polyfill Node.js modules', async () => {
     |   ^
  38 |     const browser = await webdriver(context.appPort, '/node-browser-polyfills')
  39 |
  40 |     console.error({

  at integration/basic/test/index.test.js:37:3
  at Object.<anonymous> (integration/basic/test/index.test.js:18:1)

[kripod]

Instead of relying upon an arbitrary delay, isn’t it possible to listen to the load event of the underlying HTMLImageElement? (Please see the first example in the HTML spec – load works similarly to decode, but just a tiny bit slower.)