From d161459109f183dcb5349ac5960f0e884559039f Mon Sep 17 00:00:00 2001
From: Valeriy <ValeraS@users.noreply.github.com>
Date: Sun, 1 Sep 2019 03:36:36 +0300
Subject: [PATCH] feat(client): show loader if editor takes a long time to load

---
 client/src/components/helpers/Loader.js       | 19 ++++++++++++++-----
 .../helpers/__snapshots__/Loader.test.js.snap |  4 ++--
 client/src/components/helpers/loader.css      | 15 +++++++++++----
 .../templates/Challenges/classic/Editor.js    |  3 ++-
 4 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/client/src/components/helpers/Loader.js b/client/src/components/helpers/Loader.js
index b55499693d..8bd5a55f3a 100644
--- a/client/src/components/helpers/Loader.js
+++ b/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;
diff --git a/client/src/components/helpers/__snapshots__/Loader.test.js.snap b/client/src/components/helpers/__snapshots__/Loader.test.js.snap
index 9735141bd4..2008f8e0aa 100644
--- a/client/src/components/helpers/__snapshots__/Loader.test.js.snap
+++ b/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"
diff --git a/client/src/components/helpers/loader.css b/client/src/components/helpers/loader.css
index a6ee0ef8ba..9b37eb0134 100644
--- a/client/src/components/helpers/loader.css
+++ b/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);
+}
diff --git a/client/src/templates/Challenges/classic/Editor.js b/client/src/templates/Challenges/classic/Editor.js
index 2f66795411..3d6bd85ea8 100644
--- a/client/src/templates/Challenges/classic/Editor.js
+++ b/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}