fix(FEC-7368): show loading spinner for ads initial buffering (#114)

There is no indication of buffering activity when user presses play or playback is initiated and ad is buffering.
This PR adds loading spinner between thumbnail and ad playback (UX)
The spinner do appear when actual video buffers, so this adds same experience for the ad buffer.

src/components/loading/loading.js

@@ -96,6 +96,22 @@ class Loading extends BaseComponent {
         this.props.updateLoadingSpinnerState(true);
       }
     });
+
+    this.player.addEventListener(this.player.Event.AD_BREAK_START, () => {
+      this.props.updateLoadingSpinnerState(true);
+    });
+
+    this.player.addEventListener(this.player.Event.AD_LOADED, () => {
+      this.props.updateLoadingSpinnerState(true);
+    });
+
+    this.player.addEventListener(this.player.Event.AD_STARTED, () => {
+      this.props.updateLoadingSpinnerState(false);
+    });
+
+    this.player.addEventListener(this.player.Event.ALL_ADS_COMPLETED, () => {
+      this.props.updateLoadingSpinnerState(false);
+    });
   }
 
   /**
@@ -106,7 +122,7 @@ class Loading extends BaseComponent {
    * @memberof Loading
    */
   render(props: any): React$Element<any> | void {
-    if (!props.show || props.adBreak || this.isPreloading) return undefined;
+    if (!props.show || this.isPreloading) return undefined;
 
     return (
       <div className={[style.loadingBackdrop, style.show].join(' ')}>