JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="MyController as vm">
  <div class="preloader" ng-class="{'is-hidden': vm.isReady}"></div>
  <div class="content" ng-if="vm.isReady" ng-cloak>
    <div class="" ng-repeat="movie in vm.movieList">
      <h2 ng-bind="movie.Title"></h2>
      <h3 ng-bind="movie.Year"></h3>
      <img ng-src="{{movie.Poster}}" alt="{{movie.Title}}">
    </div>
  </div>
</div>

CSS

.preloader {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url('http://s018.radikal.ru/i527/1607/3d/2dd8353d01b2.gif') center no-repeat, white;
  opacity: 1;
}

.is-hidden {
  animation: hide 1.5s normal forwards;
}

@keyframes hide {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

JavaScript

(function() {
  angular.module('app', []);

  angular.module('app')
    .controller('MyController', MyController);

  MyController.$inject = ['$timeout', 'movieService'];

  function MyController($timeout, movieService) {
    var vm = this;
    vm.isReady = false;
    vm.movieList = [];

    init();
    //////////////////////////
    function init() {
      movieService.getMovie().then(function(data) {
        vm.movieList = data.Search;
        vm.isReady = true;
      })
    }
  }

  //////////////////////////////////////////////////////////
  angular.module('app')
    .factory('movieService', movieService);

  movieService.$inject = ['$http'];

  function movieService($http) {
    var service = {
      getMovie: getMovie
    };
    var request = 'http://www.omdbapi.com/?s=Batman&r=json';

    return service;
    ///////////////
    function getMovie() {
      return $http.get(request).then(function(responce) {
        return responce.data
      });
    }
  }
})()