How about supporting extra prop for outlined shape

[liam61]

What did you do?

Hi, this project is awesome
I use it to generate skeleton for web pages
However, when it comes to card shape skeleton with a border, content-loader could not build a outlined shape, such as

What did you expect to happen?

provide props for outline shape feature, generate rect before rect[role="presentation"] element, like

<svg aria-labelledby="yg04wy8-aria" role="img" width="350" height="100" viewBox="0 0 350 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title id="yg04wy8-aria">Loading...</title>
  <!-- here outline goes -->
  <rect width="306" height="86" rx="4" ry="4" stroke="#DEE0E3" stroke-width="1" fill="#fff" y="1" x="1"></rect>
  <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#yg04wy8-diff)" style="fill: url(&quot;#yg04wy8-animated-diff&quot;);"></rect>
  <defs>
    <clipPath id="yg04wy8-diff"><rect x="12" y="61" rx="4" ry="4" width="282" height="12"></rect><rect x="40" y="16" rx="4" ry="4" width="80" height="14"></rect><rect x="12" y="41" rx="4" ry="4" width="282" height="12"></rect><rect x="12" y="13" rx="4" ry="4" width="20" height="20"></rect></clipPath>
    <linearGradient id="yg04wy8-animated-diff"><stop offset="0%" stop-color="#f3f3f3" stop-opacity="1"><animate attributeName="offset" values="-2; -2; 1" keyTimes="0; 0.25; 1" dur="3s" repeatCount="indefinite"></animate></stop><stop offset="50%" stop-color="#ecebeb" stop-opacity="1"><animate attributeName="offset" values="-1; -1; 2" keyTimes="0; 0.25; 1" dur="3s" repeatCount="indefinite"></animate></stop><stop offset="100%" stop-color="#f3f3f3" stop-opacity="1"><animate attributeName="offset" values="0; 0; 3" keyTimes="0; 0.25; 1" dur="3s" repeatCount="indefinite"></animate></stop></linearGradient>
  </defs>
</svg>

[danilowoz]

Hey @lawler61, very interesting issue; thanks for raising this question.
However, I'm wondering how many people have faced this issue before or would still face it. Maybe it's worth creating your own custom solution (like you did) instead of the package solving it and shipping more extra code to everybody else. Did you see my point?

Despite this point, how would you propose this change in the package? I'm thinking something like this:

<ContentLoader beforeMask={<rect ... />}>
  // children
</ContentLoader>

Thanks once again, curious to hear your thoughts

[liam61]

@danilowoz It is a nice idea, and �I'll try and put some pr the other day