Created custom Loader component

website/src/ui/Anime.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import anime from 'animejs'
+import PropTypes from 'prop-types'
+
+export default class Anime extends React.Component {
+  static propTypes = {
+    as: PropTypes.string,
+    children: PropTypes.node,
+  }
+
+  constructor(props) {
+    super(props)
+    this.targets = []
+  }
+
+  componentDidMount() {
+    let animeProps = Object.assign({}, this.props, {
+      targets: this.targets
+    })
+
+    delete animeProps.children
+    delete animeProps.as
+    this.anime = anime(animeProps)
+  }
+
+  shouldComponentUpdate(nextProps) {
+    this.anime = anime(Object.assign({}, { targets: this.targets }, nextProps))
+    return true
+  }
+
+  addTarget = (newTarget) => {
+    this.targets = [...this.targets, newTarget]
+  }
+
+  render() {
+    let children = []
+
+    if (this.props.children) {
+      if (Array.isArray(this.props.children)) {
+        children = this.props.children
+      } else {
+        children = [this.props.children]
+      }
+    }
+
+    return React.createElement(
+      (this.props.as || 'div'), {}, children.map((child, i) => (React.cloneElement(child, { key: i, ref: this.addTarget })))
+    )
+  }
+}