fix(FEC-7368): no spinner between ads and spinner doesn't stop on aut…

…oplay on native adapter (#156)

src/components/loading/_loading.scss

@@ -32,6 +32,7 @@
   background-color: rgba(0, 0, 0, 0.3);
   transition: 100ms opacity;
   opacity: 0;
+  z-index: 5;
 
   &.show {
     opacity: 1;

src/components/loading/loading.js

@@ -37,6 +37,7 @@ class Loading extends BaseComponent {
    */
   constructor(obj: Object) {
     super({name: 'Loading', player: obj.player});
+    this.setState({afterPlayingEvent: false});
     try {
       // TODO: Change the dependency on ima to our ads plugin when it will be developed.
       if (this.player.config.playback.preload === "auto" && !this.player.config.plugins.ima) {
@@ -89,6 +90,9 @@ class Loading extends BaseComponent {
     }
 
     this.player.addEventListener(this.player.Event.PLAYER_STATE_CHANGED, e => {
+      if (!this.state.afterPlayingEvent) {
+        return;
+      }
       if (e.payload.newState.type === 'idle' || e.payload.newState.type === 'playing' || e.payload.newState.type === 'paused') {
         this.props.updateLoadingSpinnerState(false);
       }
@@ -112,6 +116,15 @@ class Loading extends BaseComponent {
     this.player.addEventListener(this.player.Event.ALL_ADS_COMPLETED, () => {
       this.props.updateLoadingSpinnerState(false);
     });
+
+    this.player.addEventListener(this.player.Event.PLAYING, () => {
+      this.setState({afterPlayingEvent: true});
+      this.props.updateLoadingSpinnerState(false);
+    });
+
+    this.player.addEventListener(this.player.Event.CHANGE_SOURCE_STARTED, () => {
+      this.setState({afterPlayingEvent: false});
+    });
   }
 
   /**