JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<div data-bind="foreach: items">
    <div data-bind="template: {afterRender: hide}">
        <div data-bind="text: $data"></div>
    </div>
</div>

<div id="spinner" style="display: none">Loading...</div>

<button onclick="go()">Go!</button>

CSS

#spinner {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: white;
    border: 1px solid green;
}

JavaScript

list = function() {
    this.items = ko.observableArray()

}
  
vm = new list()

// 3000 items is enough to make my Macbook Air block for 5 seconds to render
// the simple template above.
for (var i = 0; i <= 3000; i++) {
    vm.items.push(i);
}

go = function() {
    // Show the spinner immediately...
    $("#spinner").show();
    
    // ... by using a timeout.
    window.setTimeout(function() {
        ko.applyBindings(vm)  
    }, 1)
}

hide = function() {
    $("#spinner").hide()
}