From 0c0611229e23e20000bd287736fa9dc36566f7b1 Mon Sep 17 00:00:00 2001
From: Ruchi Kushwaha <rk07ruchi@gmail.com>
Date: Wed, 22 Jul 2020 17:56:27 +0530
Subject: [PATCH] Fix/delayofflinewarning (#39291)

* delay offline warning

* Delayed the offline warning

* delayed offline warning

* revert unwanted changes

* correct spacing

* correct spacing second time

* use let instead of var
---
 .../OfflineWarning/OfflineWarning.js          | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/client/src/components/OfflineWarning/OfflineWarning.js b/client/src/components/OfflineWarning/OfflineWarning.js
index c8d61e4e84..7d6089401a 100644
--- a/client/src/components/OfflineWarning/OfflineWarning.js
+++ b/client/src/components/OfflineWarning/OfflineWarning.js
@@ -3,17 +3,32 @@ import PropTypes from 'prop-types';
 
 import './offline-warning.css';
 
+const delayInMilliSeconds = 5000;
+let id;
 const propTypes = {
   isOnline: PropTypes.bool.isRequired,
   isSignedIn: PropTypes.bool.isRequired
 };
-
 function OfflineWarning({ isOnline, isSignedIn }) {
-  return !isSignedIn || isOnline ? null : (
+  const [showWarning, setShowWarning] = React.useState(false);
+  if (!isSignedIn || isOnline) {
+    clearTimeout(id);
+    if (showWarning) setShowWarning(false);
+  } else {
+    timeout();
+  }
+
+  function timeout() {
+    id = setTimeout(function() {
+      setShowWarning(true);
+    }, delayInMilliSeconds);
+  }
+
+  return showWarning ? (
     <div className='offline-warning'>
       You appear to be offline, your progress may not be being saved.
     </div>
-  );
+  ) : null;
 }
 
 OfflineWarning.displayName = 'OfflineWarning';