docbrown/app/javascript/articles/LoadingArticle.jsx

import { h } from 'preact';
import PropTypes from 'prop-types';

export const LoadingArticle = ({ version }) => {
  const cover =
    version === 'featured' && (
      <div className="crayons-story__cover">
        <div
          className="crayons-scaffold crayons-story__cover__image"
          loading="lazy"
        />
      </div>
    );
  return (
    <div className="crayons-story">
      {cover}
      <div className="crayons-story__body">
        <div className="crayons-story__top mb-3">
          <div className="crayons-story__meta w-100">
            <div className="crayons-scaffold-loading mr-2 w-0 h-0 p-4 radius-full" />
            <div className="crayons-scaffold-loading w-25 h-0 py-2" />
          </div>
        </div>
        <div className="crayons-story__indention">
          <div className="crayons-scaffold-loading w-75 h-0 py-3 mb-2" />
          <div className="crayons-scaffold-loading w-50 h-0 py-2 mb-8" />
        </div>
      </div>
    </div>
  );
};
LoadingArticle.propTypes = {
  version: PropTypes.string.isRequired,
};