JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<div class="loadingImg" data-bind="visible: loading()"></div>
<table class="table table-bordered" data-bind="if: !loading()">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody data-bind="foreach:employees">
        <tr>
            <td data-bind="text: Name"></td>
            <td data-bind="text: Email"></td>
            <td data-bind="text: Salary"></td>
        </tr>
    </tbody>
</table>

JavaScript

var employeeViewModel = (function () {
    var self = {};
    // Will be created: self.employees = ko.observableArray();
    self.loading = ko.observable(true);
    return self;
}());

ko.applyBindings(employeeViewModel);

setTimeout(function () {
    var sampleData = [{
        Name: 'First Employee',
        Email: '[email protected]',
        Salary: 80000
    }, {
        Name: 'Second Employee',
        Email: '[email protected]',
        Salary: 70001
    }];
    if (!('employees' in employeeViewModel)) {
        employeeViewModel.employees = ko.mapping.fromJS(sampleData);
    } else {
        ko.mapping.fromJS(sampleData, employeeViewModel.employees);
    }
    employeeViewModel.loading(false);
}, 800);