DelayedRenderer component implemented

src/common/DelayedRenderer/DelayedRenderer.js

@@ -0,0 +1,21 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+
+const DelayedRenderer = ({ children, delay }) => {
+    const [render, setRender] = React.useState(false);
+    React.useEffect(() => {
+        const timeout = setTimeout(() => {
+            setRender(true);
+        }, delay);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, []);
+    return render ? children : null;
+};
+
+DelayedRenderer.propTypes = {
+    children: PropTypes.node
+};
+
+module.exports = DelayedRenderer;

src/common/DelayedRenderer/index.js

@@ -0,0 +1,3 @@
+const DelayedRenderer = require('./DelayedRenderer');
+
+module.exports = DelayedRenderer;

src/common/index.js

@@ -4,6 +4,7 @@ const AddonDetailsModal = require('./AddonDetailsModal');
 const Button = require('./Button');
 const Checkbox = require('./Checkbox');
 const ColorInput = require('./ColorInput');
+const DelayedRenderer = require('./DelayedRenderer');
 const Image = require('./Image');
 const LibItem = require('./LibItem');
 const MainNavBars = require('./MainNavBars');
@@ -45,6 +46,7 @@ module.exports = {
     Button,
     Checkbox,
     ColorInput,
+    DelayedRenderer,
     Image,
     LibItem,
     MainNavBars,