Simple counter with optimistic API call

by omarrida_tightenco

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
<div class="w-full h-full px-12 py-8">
  <div class="flex">
    <div class="text-8xl flex-1" id="counterContent">0</div>

    <button class="flex-1 bg-blue-500 text-2xl text-white uppercase tracking-wider font-bold hover:bg-blue-600 px-4 py-2 mr-2 rounded" id="incrementButton">Increment</button>
  </div>
  
  <p id="apiStatus" class="pt-4"></p>

</div>

JavaScript

document.addEventListener('DOMContentLoaded', (event) => {
  let counter = 0;
  let serverCounter = 0;
  let debounceTimeout;
  
  incrementButton.addEventListener('click', () => {
    // Increment local counter immediately
    counter++;
    counterContent.textContent = counter;
    apiStatus.textContent = "Syncing server state...";

    // Clear the previous timeout if there's any
    clearTimeout(debounceTimeout);

    // Set a new timeout to simulate the API call delay
    debounceTimeout = setTimeout(() => {
      // Simulate server sync
      serverCounter = counter;
      apiStatus.textContent = `Server counter synced to ${serverCounter}`;
    }, 500);
  });
});