<p>Have you ever faced the situation where the layout of your beautifully crafted interface &quot;breaks&quot; if the image (depeding on the quality of your user&#39;s connections) takes some time to load? Something like the example below:</p>
<p><a href="https://media.giphy.com/media/Q7B0kOHlC7akJmwTCW/giphy.gif"><img src="https://media.giphy.com/media/Q7B0kOHlC7akJmwTCW/giphy.gif" /></a></p>
<p>This happens because the browser has no clue about the dimensions of the image you want to display on your content beforehand.</p>
<p>The easiest way to solve this issue is using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio"><code>aspect-ratio</code></a> property to tell the browser how much space (based on the user&#39;s size display) it should reserve before the image is loaded. Check the difference:</p>
<pre><code class="highlited-code-wrapper langcss"><div class="highlited-code" data-language="css">img {
/* Makes all images responsive */
  width: 100%;
  height: auto;

/*
  Here, I'm using the image's width and height,
  but you can come up with diference aspect ratios.
*/
  aspect-ratio: 760 / 235;
}</div>
</code></pre><p><a href="https://media.giphy.com/media/X4dBoFehuhSrpUIdIA/giphy.gif"><img src="https://media.giphy.com/media/X4dBoFehuhSrpUIdIA/giphy.gif" width="100%" /></a></p>
<p>So, it solves the sudden layout change, but we can do even better do better adding an animated background.</p>
<h2>Displaying an animated background</h2>
<p>You can give a hint for the user that the blank space on your app should be filled with something by adding a background color or animating the transition between two o more colors, like in the example below:</p>
<iframe height="300" style={{width:'100%'}} scrolling="no" title="Animated placeholder" src="https://codepen.io/douglasdemoura/embed/RwyWzEr?default-tab=" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/douglasdemoura/pen/RwyWzEr">
  Animated placeholder</a> by Douglas Moura (<a href="https://codepen.io/douglasdemoura">@douglasdemoura</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

<p>And our code will look like this:</p>
<pre><code class="highlited-code-wrapper langcss"><div class="highlited-code" data-language="css">:root {
  /*
  Set the default aspect ratio. You can change
  this CSS variable per class/id or event
  creating diferente classes.
  */
  --aspect-ratio: 16/9;
}

img {
/* Makes all images responsive */
  width: 100%;
  height: auto;
}

/* Put all your images inside this container */
.image-container {  
  aspect-ratio: var(--aspect-ratio);
  position: relative;
  animation: background-loading .8s linear infinite alternate;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
}

/* The placeholder animation */
@keyframes background-loading {
  0% {
    background-color: #f9fafb;
  }
  100% {
    background-color: #d1d5db;
  }
}</div>
</code></pre><p>And this is the result (check the code on <a href="https://codepen.io/douglasdemoura/pen/RwyWBOR">CodePen</a>):</p>
<img src="https://media.giphy.com/media/9yYPBL1X9wnAKzhVfE/giphy.gif" />

<p>Yet, this can be even better by displaying a colorful background that matches the image colors.</p>
<h2>Displaying colorful image placeholders</h2>
<p><a href="https://github.com/woltapp/blurhash">BlurHash</a> is a compact representation of a placeholder for a image. You use it to process your image before sending it to the browser and you&#39;ll get a string of 20-30 characters that the algorithm can turn into a blurred image that you can show to your user before the actual image is downloaded. Check how it looks like:</p>
<img src="https://media.giphy.com/media/1RSpYFokgWI2tKRKHk/giphy.gif" />

<p>I have implemented that last effect in React for the sake of simplicity and time, but you can re-implement it in whatever framework you like. Just pay attention to the <code>onLoad</code> event that changes the opacity of the image.</p>
<iframe src="https://stackblitz.com/edit/vitejs-vite-enczef?embed=1&file=src/Image.module.css" height="500" style={{width: '100%'}} scrolling="no" title="Animated placeholder"  frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

Create beautiful placeholders for your images

<p>Most of the work needed to create custom HTML elements that fit the design system of your company resides styling and adding your own props. So, let&#39;s say you have to create a custom <code>Button</code>, that should receive a <code>children</code> prop and should have DOM access via <a href="https://reactjs.org/docs/refs-and-the-dom.html">ref</a>. That&#39;s how you can do it:</p>
<pre><code class="highlited-code-wrapper langtypescript"><div class="highlited-code" data-language="typescript">import { forwardRef } from 'react';

type ButtonProps = {
  loading?: boolean; // custom prop
} &amp; React.PropsWithChildren&lt;React.ComponentPropsWithRef&lt;'button'&gt;&gt;;

const Button: React.FC&lt;ButtonProps&gt; = forwardRef(
  ({ loading, children, ...props }, ref) =&gt; {
    return (
      &lt;button data-loading={loading} {...props} ref={ref}&gt;
        {children}
      &lt;/button&gt;
    );
  }
);

export default Button;</div>
</code></pre><p>We use the <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/d076add9f29db350a19bd94c37b197729cc02f87/types/react/index.d.ts#L822"><code>PropsWithChildren</code></a> generic interface that gives the <code>children</code> prop and receive <code>React.ComponentPropsWithRef&lt;&#39;button&#39;&gt;</code>, that passes all props that a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"><code>button</code></a> can receive.</p>
<p>Of course, you can change the interface <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/d076add9f29db350a19bd94c37b197729cc02f87/types/react/index.d.ts#L834"><code>ComponentPropsWithRef</code></a> for <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/d076add9f29db350a19bd94c37b197729cc02f87/types/react/index.d.ts#L838"><code>ComponentPropsWithoutRef</code></a> and drop the <a href="https://reactjs.org/docs/forwarding-refs.html"><code>forwardRef</code></a> function on the definition of your component (although, I do not recomend it - <em>refs</em> may be useful later on your application):</p>
<pre><code class="highlited-code-wrapper langtypescript"><div class="highlited-code" data-language="typescript">type ButtonProps = {
  loading?: boolean; // custom prop
} &amp; React.PropsWithChildren&lt;React.ComponentPropsWithoutRef&lt;'button'&gt;&gt;;

const Button: React.FC&lt;ButtonProps&gt; = ({ loading, children, ...props }) =&gt; {
  return (
    &lt;button data-loading={loading} {...props} ref={ref}&gt;
      {children}
    &lt;/button&gt;
  );
};

export default Button;</div>
</code></pre><p>You may, even, drop the interface <code>PropsWithChildren</code>, but on doing that, you&#39;d have to implement the <code>children</code> prop by yourself:</p>
<pre><code class="highlited-code-wrapper langtypescript"><div class="highlited-code" data-language="typescript">type ButtonProps = {
  loading?: boolean; // custom prop
  children?: React.ReactNode;
} &amp; React.ComponentPropsWithoutRef&lt;'button'&gt;;

const Button: React.FC&lt;ButtonProps&gt; = ({ loading, children, ...props }) =&gt; {
  return (
    &lt;button data-loading={loading} {...props} ref={ref}&gt;
      {children}
    &lt;/button&gt;
  );
};

export default Button;</div>
</code></pre><p>Want more? Check the live implementation on <a href="https://stackblitz.com/edit/vitejs-vite-warc15?file=src%2Fcomponents%2Fbutton.tsx&terminal=dev">StackBlitz</a></p>


Douglas Moura

Douglas Moura

#react

Create beautiful placeholders for your images

How to extend HTML elements with React