Add delay to placeholder removal (vercel#25916)

* Add delay to placeholder removal * Increase jest timeout for image tests * Use check instead of immediately expecting the result Co-authored-by: Tim Neutkens <[email protected]>
blitz-js · Jun 9, 2021 · e289b7d · e289b7d
1 parent 9358d8b
commit e289b7d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 18 deletions.
diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
@@ -261,6 +261,8 @@ function defaultImageLoader(loaderProps: ImageLoaderProps) {
 
 // See https://stackoverflow.com/q/39777833/266535 for why we use this ref
 // handler instead of the img's onLoad attribute.
+// 1500ms delay in removing placeholder is to prevent flash of white between
+// image load and image render.
 function removePlaceholder(
   element: HTMLImageElement | null,
   placeholder: PlaceholderValue
@@ -270,11 +272,15 @@ function removePlaceholder(
       // If the real image fails to load, this will still remove the placeholder.
       // This is the desired behavior for now, and will be revisited when error
       // handling is worked on for the image component itself.
-      element.style.backgroundImage = 'none'
+      setTimeout(() => {
+        element.style.backgroundImage = 'none'
+      }, 1500)
     } else {
       element.onload = () => {
         if (!element.src.startsWith('data:')) {
-          element.style.backgroundImage = 'none'
+          setTimeout(() => {
+            element.style.backgroundImage = 'none'
+          }, 1500)
         }
       }
     }

diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
@@ -16,7 +16,7 @@ import {
 import webdriver from 'next-webdriver'
 import { join } from 'path'
 
-jest.setTimeout(1000 * 60)
+jest.setTimeout(1000 * 80)
 
 const appDir = join(__dirname, '../')
 
@@ -607,14 +607,15 @@ describe('Image Component Tests', () => {
       let browser
       try {
         browser = await webdriver(appPort, '/blurry-placeholder')
-
-        expect(
-          await getComputedStyle(
-            browser,
-            'blurry-placeholder',
-            'background-image'
-          )
-        ).toBe('none')
+        await check(
+          async () =>
+            await getComputedStyle(
+              browser,
+              'blurry-placeholder',
+              'background-image'
+            ),
+          'none'
+        )
         expect(
           await getComputedStyle(
             browser,
@@ -627,13 +628,15 @@ describe('Image Component Tests', () => {
 
         await browser.eval('document.getElementById("spacer").remove()')
 
-        expect(
-          await getComputedStyle(
-            browser,
-            'blurry-placeholder-with-lazy',
-            'background-image'
-          )
-        ).toBe('none')
+        await check(
+          async () =>
+            await getComputedStyle(
+              browser,
+              'blurry-placeholder-with-lazy',
+              'background-image'
+            ),
+          'none'
+        )
       } finally {
         if (browser) {
           await browser.close()