reblendjs/lib/internal/components/Placeholder.js

This is build using react way of handling dom but with web components

import { Reblend } from '../Reblend';
import { rand } from '../../common/utils';
import { useMemo } from '../hooks';
export default class Placeholder extends Reblend {
  static ELEMENT_NAME = "Placeholder";
  constructor() {
    super();
  }
  async initState() {
    const [stringStyle, objectStyle] = useMemo.bind(this)(() => {
      if (typeof this.props.style === 'string') {
        return [this.props.style, {}];
      } else if (this.props.style && typeof this.props.style === 'object') {
        return ['', this.props.style];
      }
      return ['', {}];
    }, "[this.props.style]", "stringStyle");
    this.state.stringStyle = stringStyle;
    this.state.objectStyle = objectStyle;
    const id = rand(1234, 5678);
    this.state.id = id;
  }
  async initProps({
    style,
    children
  }) {
    this.props = {};
    this.props.style = style;
    this.props.children = children;
  }
  async html() {
    return Reblend.construct.bind(this)("div", {
      style: styles.placeholder
    }, Reblend.construct.bind(this)("div", {
      "data-reblendplaceholder": `${this.state.id}`,
      style: {
        ...styles.loadingBar,
        ...this.state.objectStyle
      }
    }, this.props.children), Reblend.construct.bind(this)("style", null, `
        @keyframes loading {
          0% {
            background-position: 200% 0;
          }
          100% {
            background-position: -200% 0;
          }
        }

        [data-reblendplaceholder="${this.state.id}"] {
          ${this.state.stringStyle}
        }
      `));
  }
}
/* Transformed from function to class */
const styles = {
  placeholder: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    height: '100%',
    position: 'relative',
    overflow: 'hidden',
    borderRadius: '10px'
  },
  loadingBar: {
    width: '100%',
    minHeight: '10px',
    height: '100%',
    alignItems: 'center',
    display: 'flex',
    justifyContent: 'center',
    background: 'linear-gradient(90deg, #f0f0f0 25%,rgb(178, 175, 175) 50%, #f0f0f0 75%)',
    backgroundSize: '200% 100%',
    animation: 'loading 1.5s infinite'
  }
};