medium-article-loading-service.ts

import { reactive } from 'vue';
import { TLoadingKey } from '../model/loading.model';

export default class LoadingService {
  private readonly TIMEOUT: number = 10000;

  private readonly timeouts: Map<TLoadingKey, NodeJS.Timeout> = reactive(
    new Map<TLoadingKey, NodeJS.Timeout>(),
  );

  public readonly loadings: Set<TLoadingKey> = reactive(new Set<TLoadingKey>());

  public startLoading(key: TLoadingKey): void {
    this.loadings.add(key);

    const timeout: NodeJS.Timeout = setTimeout(() => {
      this.loadings.delete(key);
    }, this.TIMEOUT);

    this.timeouts.set(key, timeout);
  }

  public stopLoading(key: TLoadingKey): void {
    this.loadings.delete(key);

    if (this.timeouts.has(key)) {
      clearTimeout(this.timeouts.get(key));
      this.timeouts.delete(key);
    }
  }
}