This unique Soundcloud player was created using Plangular, a directive that utilizes AngularJS and the Soundcloud API. Due to certain restrictions with third party apps not being able to stream some Soundcloud tracks, I have implemented ng-if="track" and ng-if="!track" to determine if the track is successfully loaded or not. This approach has been effective, but there is a brief moment after loading the page where the content of the negative condition (ng-if="!track") is briefly displayed. Is there a way to prevent this from happening? Perhaps slowing down the ng-if check could help?
Below is the HTML code snippet where {{loading}} is defined in the controller:
<body ng-app="player" ng-controller="SearchBar">
<div plangular="https://soundcloud.com/ghostbeach/fickle-friends-for-you-ghost-beach-remix-1" ng-cloak>
<div ng-if="!track" class="flex flex-center" ng-cloak>
<i class="fa fa-cog fa-spin fa-1x fa-fw mr1" ng-cloak></i>
<div class="mr1" ng-cloak>{{loading}}</div>
</div>
<div class="flex flex-center" ng-if="track">
<div class="mr1">
<img ng-src="{{track.artwork_url}}" alt="{{track.title}}" style="height:60px; width: 60px;" ng-cloak/>
</div>
<div ng-click="playPause()"
title="Play/Pause"
class="flex-none h0 mr1 button-transparent cursor button-grow">
<svg ng-if="player.playing !== track.src" class="icon geomicon" data-icon="play" viewBox="0 0 32 32" width="32" height="32" >
<path d="M4 4 L28 16 L4 28 z "></path>
</svg>
<svg ng-if="player.playing === track.src" class="icon geomicon" data-icon="pause" viewBox="0 0 32 32" width="32" height="32" >
<path d="M4 4 H12 V28 H4 z M20 4 H28 V28 H20 z "></path>
</svg>
</div>
<div class="flex-auto">
<div class="h5 bold mr2">
<a target="_blank" ng-href="{{track.permalink_url}}">{{track.title}}</a>
</div>
<progress
class="progress orange"
ng-click="seek($event)"
ng-value="currentTime / duration || 0">
{{ currentTime / duration }}
</progress>
</div>
</div>
</div>
</body>
Below is the JavaScript for context:
var player = angular.module('player', ['plangular'])
.config(function(plangularConfigProvider){
plangularConfigProvider.clientId = 'XXX';
});
player.controller('SearchBar', ['$scope',function ($scope){
$scope.loading="Track is not streamable";
}]);
The behavior can be observed more clearly on this JSFiddle link. When you run the JSFiddle, you will notice a slight delay before the content of the negative ng-if condition disappears, which I am looking to eliminate.
EDIT:
Is there a way to introduce a timeout on an ng-show for the content within ng-if to potentially resolve this issue?