JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.js"></script>
<div ng-app="app" ng-controller="TestCtrl">
    <div>{{'WelcomeTo' | translate}}</div>
    <div>{{'GoodBye' | translate}}</div>
</div>

JavaScript

var app = angular.module("app",[]);
debugger;

app.controller("TestCtrl", function($scope, translationService) {
});

app.service("translationService", function($timeout) {
    var self = this;

    var translations = {"WelcomeTo": "Welcome!!", "GoodBye": "BYE"};

    this.getTranslation = function(placeholder) {
        return $timeout(function() {
            return translations;
        }, 2000);
    }
})

app.filter("translate", function($timeout, translationService) {
    
    var isWaiting = false;
    var translations = null;

    myFilter.$stateful = true;
    function myFilter(input) {
        
        var translationValue = "Loading...";
        if(translations)
        {
            translationValue = translations[input];
        } else {
            if(isWaiting === false) {
                isWaiting = true;
                translationService.getTranslation(input).then(function(translationData) {
                    console.log("GetTranslation done");
                    translations = translationData;
                    isWaiting = false;
                });
            }
        }

        return translationValue;
    };
    
    return myFilter;
});