feat: add loader on video challenges (#38633)

client/src/templates/Challenges/video/Show.js

@@ -18,6 +18,7 @@ import ChallengeDescription from '../components/Challenge-Description';
 import Spacer from '../../../components/helpers/Spacer';
 import CompletionModal from '../components/CompletionModal';
 import Hotkeys from '../components/Hotkeys';
+import Loader from '../../../components/helpers/Loader';
 import {
   isChallengeCompletedSelector,
   challengeMounted,
@@ -72,7 +73,8 @@ export class Project extends Component {
       downloadURL: null,
       selectedOption: 0,
       answer: 1,
-      showWrong: false
+      showWrong: false,
+      videoIsLoaded: false
     };
 
     this.handleSubmit = this.handleSubmit.bind(this);
@@ -136,6 +138,12 @@ export class Project extends Component {
     });
   };
 
+  videoIsReady = () => {
+    this.setState({
+      videoIsLoaded: true
+    });
+  };
+
   render() {
     const {
       data: {
@@ -171,9 +179,19 @@ export class Project extends Component {
                 <ChallengeTitle isCompleted={isChallengeCompleted}>
                   {blockNameTitle}
                 </ChallengeTitle>
-                <div style={{ textAlign: 'center' }}>
+                <div className='video-wrapper'>
+                  {!this.state.videoIsLoaded ? (
+                    <div className='video-placeholder-loader'>
+                      <Loader />
+                    </div>
+                  ) : null}
                   <YouTube
-                    onEnd={openCompletionModal}
+                    className={
+                      this.state.videoIsLoaded
+                        ? 'display-youtube-video'
+                        : 'hide-youtube-video'
+                    }
+                    onReady={this.videoIsReady}
                     opts={{ rel: 0 }}
                     videoId={videoId}
                   />

client/src/templates/Challenges/video/show.css

@@ -1,3 +1,24 @@
+.video-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.video-placeholder-loader {
+  min-height: 360px;
+  display: flex;
+  align-items: center;
+}
+
+.display-youtube-video {
+  display: block;
+}
+
+.hide-youtube-video {
+  display: none;
+}
+
 .video-quiz-options {
   padding: 1px 16px;
   background-color: var(--tertiary-background);