Video loading message until response comes from backend

Question

Video Upload.js

 var json = {
                    "request": {
                        "service":{
                            "servicetype":servicetype,
                            "session_id": session_id
                        },     
                        "data":{     
                            "rolename":rolename
                        }
                    }
                };


                FileService.uploadFile( json, file ).then(function(res){
                                    console.log(JSON.stringify(res));

                    if( res && res.status.code == 0 ) {
                        $scope.getVideo( res.data.mediaids[0] );
                        $scope.getAll();
                    } else FlashService.Error(res.status.message,  true);
                });
            }

Video HTML :

<div class="row">
        <video ng-if="videoSource.length > 0" vg-src="videoSource" 
               preload='metadata' controls></video>
        <div class="file-upload-wrapper">
            <div class="file-video-upload">
                <input type="file" file-model="video" name="file" class="video"/>
            </div>
        </div>
        <div class="file-tags">
            <ul>
                <li ng-repeat="video in files | filter :'video'" >
                    <div class="file-tag-baloon">
                        <span>
                            <a ng-click="getVideo(video.id);">{{video.filename}}</a>
                        </span>
                        <span><a ng-click="removeVideo(video.id)">x</a></span>
                    </div>
                </li>
            </ul>
        </div>
    </div>

I have done a video upload using my backend service request, that is succesfull too. But problem is sometimes if my video size is large or internet is too slow. It is just idle and I need to do intimation or gif image like video loading until response comes from backend. Need assistance.

Answer 1

You could set a flag to indicate whether to display a spinner or not, something like this:

$scope.getVideo = function(id){
  $scope.displayLoadImage = true; // spinner flag

  FileService.uploadFile( json, file ).then(
    function(res){ // on success
      // Do your onsuccess stuff here
    }, function(error) {
      // Do your onsuccess stuff here
    }).finally(function()){
      // The finally statement is executed regardless of result
      $scope.displayLoadImage = true;
    });
}

And then somewhere in your html

<div ng-show="displayLoadImage">... display spinner...</div>