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

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';