From e4486ea8e016067bd2be4f8aa8f06637ad41f635 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Thu, 7 Jul 2022 23:00:40 +0300
Subject: [PATCH] DelayedRenderer component implemented

---
 src/common/DelayedRenderer/DelayedRenderer.js | 21 +++++++++++++++++++
 src/common/DelayedRenderer/index.js           |  3 +++
 src/common/index.js                           |  2 ++
 3 files changed, 26 insertions(+)
 create mode 100644 src/common/DelayedRenderer/DelayedRenderer.js
 create mode 100644 src/common/DelayedRenderer/index.js

diff --git a/src/common/DelayedRenderer/DelayedRenderer.js b/src/common/DelayedRenderer/DelayedRenderer.js
new file mode 100644
index 000000000..05cfa1d67
--- /dev/null
+++ b/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;
diff --git a/src/common/DelayedRenderer/index.js b/src/common/DelayedRenderer/index.js
new file mode 100644
index 000000000..ccc264048
--- /dev/null
+++ b/src/common/DelayedRenderer/index.js
@@ -0,0 +1,3 @@
+const DelayedRenderer = require('./DelayedRenderer');
+
+module.exports = DelayedRenderer;
diff --git a/src/common/index.js b/src/common/index.js
index 70069d78b..4a6924e45 100644
--- a/src/common/index.js
+++ b/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,