feat(client): show loader if editor takes a long time to load

client/src/components/helpers/Loader.js

@@ -1,20 +1,29 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Spinner from 'react-spinkit';
 
 import './loader.css';
 
-function Loader({ fullScreen }) {
+function Loader({ fullScreen, timeout }) {
+  const [showSpinner, setShowSpinner] = useState(!timeout);
+  useEffect(() => {
+    let timerId;
+    if (!showSpinner) {
+      timerId = setTimeout(() => setShowSpinner(true), timeout);
+    }
+    return () => clearTimeout(timerId);
+  }, [setShowSpinner, showSpinner, timeout]);
   return (
-    <div className={fullScreen ? 'full-screen-wrapper' : ''}>
-      <Spinner name='line-scale-pulse-out' />
+    <div className={`fcc-loader ${fullScreen ? 'full-screen-wrapper' : ''}`}>
+      {showSpinner && <Spinner name='line-scale-pulse-out' />}
     </div>
   );
 }
 
 Loader.displayName = 'Loader';
 Loader.propTypes = {
-  fullScreen: PropTypes.bool
+  fullScreen: PropTypes.bool,
+  timeout: PropTypes.number
 };
 
 export default Loader;

client/src/components/helpers/__snapshots__/Loader.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`<Loader /> matches the fullScreen render snapshot 1`] = `
 <div
-  class="full-screen-wrapper"
+  class="fcc-loader full-screen-wrapper"
 >
   <div
     class="sk-fade-in sk-spinner line-scale-pulse-out"
@@ -18,7 +18,7 @@ exports[`<Loader /> matches the fullScreen render snapshot 1`] = `
 
 exports[`<Loader /> matches to the default render snapshot 1`] = `
 <div
-  class=""
+  class="fcc-loader "
 >
   <div
     class="sk-fade-in sk-spinner line-scale-pulse-out"

client/src/components/helpers/loader.css

@@ -1,12 +1,19 @@
-.full-screen-wrapper {
-  height: 100vh;
+.fcc-loader {
+  height: 100%;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.full-screen-wrapper .sk-spinner {
-  transform: scale(2);
+.fcc-loader .sk-spinner {
   color: var(--secondary-color);
 }
+
+.fcc-loader.full-screen-wrapper {
+  height: calc(100vh - var(--header-height, 0px));
+}
+
+.fcc-loader.full-screen-wrapper .sk-spinner {
+  transform: scale(2);
+}

client/src/templates/Challenges/classic/Editor.js

@@ -6,6 +6,7 @@ import { createSelector } from 'reselect';
 
 import { executeChallenge, updateFile } from '../redux';
 import { userSelector } from '../../../redux';
+import { Loader } from '../../../components/helpers';
 
 const MonacoEditor = React.lazy(() => import('react-monaco-editor'));
 
@@ -130,7 +131,7 @@ class Editor extends Component {
     const { contents, ext, theme, fileKey } = this.props;
     const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom';
     return (
-      <Suspense fallback={<div />}>
+      <Suspense fallback={<Loader timeout={600} />}>
         <MonacoEditor
           editorDidMount={this.editorDidMount}
           editorWillMount={this.editorWillMount}