JSFiddle - React, Tailwind, and code Playground

by fastfasterfastest

HTML

<script src="https://knockoutjs.com/downloads/knockout-3.5.0.debug.js"></script>
<div data-bind="text: _isLoadingOrErrorCount"></div>
<div data-bind="text: _isLoadingOrErrorCount"></div>

JavaScript

let _isLoadingOrErrorCount = ko.observable(0);
let _isLoadingOrSuccessCount = ko.observable(0);

let isError = () => false;
let isSuccess = () => true;
let isLoading = ko.observable(false);
let isLoadingOrError = ko.computed(() => { _isLoadingOrErrorCount(_isLoadingOrErrorCount.peek() + 1); return isLoading() || isError(); }).extend({ rateLimit: 50});
let isLoadingOrSuccess = ko.computed(() => { _isLoadingOrSuccessCount(_isLoadingOrSuccessCount.peek() + 1); return isLoading() || isSuccess(); });

ko.applyBindings({
_isLoadingOrErrorCount: _isLoadingOrErrorCount,
_isLoadingOrSuccessCount:_isLoadingOrSuccessCount
});

let intervalId = setInterval(() => {
	if(_isLoadingOrSuccessCount() > 100){
     clearInterval(intervalId);
  }
     isLoading(!isLoading());
}, 1);