JSFiddle - React, Tailwind, and code Playground

by samur3

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.10.0/angular-translate.min.js"></script>
<div>
  <div class="app-root">
    {{ 'HELLO' | translate }}
  </div>
  <div class="loader" ng-hide="true">
  
  </div>
</div>

SCSS

.loader {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &::after {
    content: 'Loading...';
    margin: auto;
    display: inline-block;
    font-size: 35px;
    color: #fff;
  }
}

.app-root {
}

JavaScript

var defaultLang = 'en';
var currentLang = 'he';

angular.module('app', ['pascalprecht.translate'])
.factory('customLoader', function () {
	return function(options) {
    return loadTranslations(options.key);
  };
})
.run(['$translate', function($translate) {
  $translate.use(currentLang);
}]);

angular.element(document).ready(function() {
	loadTranslations(defaultLang)
  	.then(function(res){
    	angular.module('app')
      .config(['$translateProvider', function ($translateProvider) {
        $translateProvider.useLoader('customLoader');
      
        $translateProvider.translations(defaultLang, res);
        
        $translateProvider.preferredLanguage(defaultLang);
      }]);
  		angular.bootstrap(document, ['app']);
    });
});

function loadTranslations(lang){
  switch(lang) {
  	case 'he':
    	return delay({
      	HELLO: 'שלום עולם'
      }, 2000);
    case 'en':
    default:
    	return delay({
      	HELLO: 'Hello World'
      }, 2000);
  }
}

function delay(result, delay) {
	return new Promise(function(res, rej) {
  	setTimeout(function() {
    	res(result);
    }, delay);
  });
}