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

@@ -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",

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

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,

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>
   );
 }

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 (

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}