Fix delay between blur image and high res image

packages/next/client/image.tsx

@@ -261,32 +261,27 @@ 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
 ) {
   if (placeholder === 'blur' && element) {
-    if (element.complete && !element.src.startsWith('data:')) {
+    const handleLoad = () => {
+      if (!element.src.startsWith('data:')) {
+        (element.decode || Promise.resolve)().then(() => {
+          element.style.filter = 'none'
+          element.style.backgroundSize = 'none'
+          element.style.backgroundImage = 'none'
+        })
+      }
+    }
+    if (element.complete) {
       // 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.
-      setTimeout(() => {
-        element.style.filter = 'none'
-        element.style.backgroundSize = 'none'
-        element.style.backgroundImage = 'none'
-      }, 1500)
+      handleLoad()
     } else {
-      element.onload = () => {
-        if (!element.src.startsWith('data:')) {
-          setTimeout(() => {
-            element.style.filter = 'none'
-            element.style.backgroundSize = 'none'
-            element.style.backgroundImage = 'none'
-          }, 1500)
-        }
-      }
+      element.onload = handleLoad
     }
   }
 }