Modern JavaScript User Loader

let users = [];
let isLoading = false;

class User {
  constructor(id, name, email) {
    this.id = id;
    this.name = name;
    this.email = email;
  }

  getDisplayName() {
    return `${this.name} (${this.email})`;
  }
}

const loadUsers = async (callback) => {
  isLoading = true;
  try {
    const response = await fetch('/api/users');
    isLoading = false;
    if (!response.ok) {
      throw new Error('Could not load users.');
    }
    const data = await response.json();
    users = data.map(({ id, name, email }) => new User(id, name, email));
    if (callback) callback(null, users);
  } catch (error) {
    isLoading = false;
    if (callback) callback(error.message);
  }
};

const findUserById = (id) => users.find(user => user.id === id) || null;

const renderUsers = () => {
  const container = document.getElementById('user-list');
  if (!container) return;
  container.innerHTML = users
    .map(user => `
      <div class="user">
        <strong>${user.name}</strong>
        <span>${user.email}</span>
      </div>
    `).join('');
};

loadUsers((error, data) => {
  if (error) {
    console.error(`Error: ${error}`);
    return;
  }
  console.log(`Loaded ${data.length} users.`);
  renderUsers();
});