Update next/image docs and example with shimmer animation (vercel#26183)

It was mentioned in Issue vercel#18858 that we might add a `placeholder="skeleton"` but that didn't ship with Next.js 11 because it would likely need to handle additional config such as light mode / dark mode, speed, duration, etc.

So this PR adds an example of `blurDataURL` usage with a nice shimmer animation (sometimes called a skeleton).

docs/api-reference/next/image.md

@@ -171,6 +171,11 @@ When `blur`, the [`blurDataURL`](#blurdataurl) property will be used as the plac
 
 When `empty`, there will be no placeholder while the image is loading, only empty space.
 
+Try it out:
+
+- [Demo the `blur` placeholder](https://image-component.nextjs.gallery/placeholder)
+- [Demo the shimmer effect with `blurDataURL` prop](https://image-component.nextjs.gallery/shimmer)
+
 ## Advanced Props
 
 In some cases, you may need more advanced usage. The `<Image />` component
@@ -214,6 +219,13 @@ with [`placeholder="blur"`](#placeholder).
 Must be a base64-encoded image. It will be enlarged and blurred, so a very small image (10px or
 less) is recommended. Including larger images as placeholders may harm your application performance.
 
+Try it out:
+
+- [Demo the default `blurDataURL` prop](https://image-component.nextjs.gallery/placeholder)
+- [Demo the shimmer effect with `blurDataURL` prop](https://image-component.nextjs.gallery/shimmer)
+
+You can also [generate a solid color Data URL](https://png-pixel.com) to match the image.
+
 ### unoptimized
 
 When true, the source image will be served as-is instead of changing quality,

examples/image-component/pages/index.js

@@ -82,6 +82,11 @@ const Index = () => (
             <a>placeholder="blur"</a>
           </Link>
         </li>
+        <li>
+          <Link href="/shimmer">
+            <a>placeholder="blur" with custom blurDataURL</a>
+          </Link>
+        </li>
       </ul>
       <hr className={styles.hr} />
       <h2 id="internal">Internal Image</h2>

examples/image-component/pages/placeholder.js

@@ -2,10 +2,10 @@ import Image from 'next/image'
 import ViewSource from '../components/view-source'
 import mountains from '../public/mountains.jpg'
 
-const Responsive = () => (
+const PlaceholderBlur = () => (
   <div>
     <ViewSource pathname="pages/placeholder.js" />
-    <h1>Image Component With Placeholder</h1>
+    <h1>Image Component With Placeholder Blur</h1>
     <Image
       alt="Mountains"
       src={mountains}
@@ -16,4 +16,4 @@ const Responsive = () => (
   </div>
 )
 
-export default Responsive
+export default PlaceholderBlur

examples/image-component/pages/shimmer.js

@@ -0,0 +1,38 @@
+import Image from 'next/image'
+import ViewSource from '../components/view-source'
+
+const shimmer = (w, h) => `
+<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient id="g">
+      <stop stop-color="#333" offset="20%" />
+      <stop stop-color="#222" offset="50%" />
+      <stop stop-color="#333" offset="70%" />
+    </linearGradient>
+  </defs>
+  <rect width="${w}" height="${h}" fill="#333" />
+  <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
+  <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
+</svg>`
+
+const toBase64 = (str) =>
+  typeof window === 'undefined'
+    ? Buffer.from(str).toString('base64')
+    : window.btoa(str)
+
+const Shimmer = () => (
+  <div>
+    <ViewSource pathname="pages/shimmer.js" />
+    <h1>Image Component With Shimmer Data URL</h1>
+    <Image
+      alt="Mountains"
+      src="/mountains.jpg"
+      placeholder="blur"
+      blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+      width={700}
+      height={475}
+    />
+  </div>
+)
+
+export default Shimmer