From f2fcfe593d97f652d8635a2a0c613460c77afe8f Mon Sep 17 00:00:00 2001
From: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com>
Date: Sat, 7 Jan 2023 08:33:52 +0530
Subject: [PATCH] fix(client): add message to loader (#48934)

Co-authored-by: Muhammed Mustafa <muhammed@freecodecamp.org>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>
---
 client/i18n/locales/english/translations.json |  3 +-
 .../__snapshots__/loader.test.tsx.snap        |  6 +++
 client/src/components/helpers/loader.css      |  2 +
 client/src/components/helpers/loader.tsx      | 38 +++++++++++++++----
 client/src/components/layouts/default.tsx     |  2 +-
 .../templates/Challenges/classic/editor.tsx   |  2 +-
 6 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index afee76b2d58..3ec36079106 100644
--- a/client/i18n/locales/english/translations.json
+++ b/client/i18n/locales/english/translations.json
@@ -463,7 +463,8 @@
     "iframe-preview": "{{title}} preview",
     "iframe-alert": "Normally this link would bring you to another website! It works. This is a link to: {{externalLink}}",
     "iframe-form-submit-alert": "Normally this form would be submitted! It works. This will be submitted to: {{externalLink}}",
-    "document-notfound": "document not found"
+    "document-notfound": "document not found",
+    "slow-load-msg": "Looks like this is taking longer than usual, please try refreshing the page."
   },
   "icons": {
     "gold-cup": "Gold Cup",
diff --git a/client/src/components/helpers/__snapshots__/loader.test.tsx.snap b/client/src/components/helpers/__snapshots__/loader.test.tsx.snap
index 6dab24a5651..d754d42ea67 100644
--- a/client/src/components/helpers/__snapshots__/loader.test.tsx.snap
+++ b/client/src/components/helpers/__snapshots__/loader.test.tsx.snap
@@ -14,6 +14,12 @@ exports[`<Loader /> matches the fullScreen render snapshot 1`] = `
     <div />
     <div />
   </div>
+  <br />
+  <p
+    class="text-center"
+  >
+    misc.slow-load-msg
+  </p>
 </div>
 `;
 
diff --git a/client/src/components/helpers/loader.css b/client/src/components/helpers/loader.css
index 5acf705bd85..2182772d777 100644
--- a/client/src/components/helpers/loader.css
+++ b/client/src/components/helpers/loader.css
@@ -2,8 +2,10 @@
   height: 100%;
   width: 100%;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
+  gap: 1em;
 }
 
 .fcc-loader .sk-spinner,
diff --git a/client/src/components/helpers/loader.tsx b/client/src/components/helpers/loader.tsx
index 9e5aa9b2aa4..dd265c19e56 100644
--- a/client/src/components/helpers/loader.tsx
+++ b/client/src/components/helpers/loader.tsx
@@ -1,27 +1,49 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import Spinner from 'react-spinkit';
 
 import './loader.css';
 
 interface LoaderProps {
   fullScreen?: boolean;
-  timeout?: number;
+  loaderDelay?: number;
+  messageDelay?: number;
 }
-function Loader({ fullScreen, timeout }: LoaderProps): JSX.Element {
-  const [showSpinner, setShowSpinner] = useState(!timeout);
+function Loader({
+  fullScreen,
+  loaderDelay,
+  messageDelay
+}: LoaderProps): JSX.Element {
+  const { t } = useTranslation();
+
+  const [showSpinner, setShowSpinner] = useState(!loaderDelay);
+  const [showMessage, setShowMessage] = useState(!messageDelay);
   useEffect(() => {
-    let timerId: ReturnType<typeof setTimeout>;
-    if (!showSpinner) {
-      timerId = setTimeout(() => setShowSpinner(true), timeout);
+    if (loaderDelay) {
+      const timerId = setTimeout(() => setShowSpinner(true), loaderDelay);
+      return () => clearTimeout(timerId);
     }
-    return () => clearTimeout(timerId);
-  }, [setShowSpinner, showSpinner, timeout]);
+  }, [loaderDelay]);
+
+  useEffect(() => {
+    if (messageDelay) {
+      const timerId = setTimeout(() => setShowMessage(true), messageDelay);
+      return () => clearTimeout(timerId);
+    }
+  }, [messageDelay]);
+
   return (
     <div
       className={`fcc-loader ${fullScreen ? 'full-screen-wrapper' : ''}`}
       data-testid='fcc-loader'
     >
       {showSpinner && <Spinner name='line-scale-pulse-out' />}
+      {showMessage && fullScreen && (
+        <>
+          <br />
+          <p className='text-center'>{t('misc.slow-load-msg')}</p>
+        </>
+      )}
     </div>
   );
 }
diff --git a/client/src/components/layouts/default.tsx b/client/src/components/layouts/default.tsx
index db1d1712575..8840aa7a613 100644
--- a/client/src/components/layouts/default.tsx
+++ b/client/src/components/layouts/default.tsx
@@ -157,7 +157,7 @@ class DefaultLayout extends Component<DefaultLayoutProps> {
     const useSystemTheme = fetchState.complete && isSignedIn === false;
 
     if (fetchState.pending) {
-      return <Loader fullScreen={true} />;
+      return <Loader fullScreen={true} messageDelay={5000} />;
     }
 
     return (
diff --git a/client/src/templates/Challenges/classic/editor.tsx b/client/src/templates/Challenges/classic/editor.tsx
index e2e0c4ab33d..b26995711e9 100644
--- a/client/src/templates/Challenges/classic/editor.tsx
+++ b/client/src/templates/Challenges/classic/editor.tsx
@@ -1206,7 +1206,7 @@ const Editor = (props: EditorProps): JSX.Element => {
   const { theme } = props;
   const editorTheme = theme === Themes.Night ? 'vs-dark-custom' : 'vs-custom';
   return (
-    <Suspense fallback={<Loader timeout={600} />}>
+    <Suspense fallback={<Loader loaderDelay={600} />}>
       <span className='notranslate'>
         <MonacoEditor
           editorDidMount={editorDidMount}