title: How to implement SkeletonLoader / WirefreameLoader that is external to the wrapped component?
body: <p>Imagine we have a UserCard component:</p>
  <pre><code>function UserCard(props) {
    const { avatarUrl, name, loading } = props
    return (
      &lt;div className='UserCard'&gt;
        &lt;Avatar image={avatarUrl} /&gt;
        &lt;Name name={name} /&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>Now we want to implement a wireframe loading for it.</p>
  <ul>
  <li>We can't design a wireframe copy of <code>Avatar</code> and <code>Name</code> components - their authors may and will change their size and shape, we don't want our skeleton to fall out of sync</li>
  <li>We can't insert our loader inside <code>Avatar</code> and <code>Name</code> components - we don't have control over them or their css</li>
  <li>We can control the space between <code>Avatar</code> and <code>Name</code> and wrap them from the outside</li>
  <li><code>Avatar</code> and <code>Name</code> may have some transparent portions / border-radius and we want to draw our skeleton animation over their visible part</li>
  </ul>
  <p>Ideally the usage of our <code>Loader</code> should look somewhat like this:</p>
  <pre><code>function UserCard(props) {
    const { avatarUrl, name, loading } = props
    return (
      &lt;div className='UserCard'&gt;
        &lt;Loader loading={loading}&gt;
          &lt;Avatar image={avatarUrl} /&gt;
        &lt;/Loader&gt;
        &lt;Loader loading={loading}&gt;
          &lt;Name name={loading ? 'some text to control the size of the skeleton' : name} /&gt;
        &lt;/Loader&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>What are the ways to achieve it?
  What if we have similar restrictions but want to add skeleton loading to the <code>UserCard</code>. From outside we know it's a single div wrapping other divs and we want to show a skeleton instead of each of those child divs.</p>