ilyasakin

import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
import { set } from 'lodash-es';
import { IRequestParam } from '../model/http.model';
import HelperService from './helper.service';

export default class HttpService {
  /**
   * Axios instance
   */
  protected readonly axios: AxiosInstance;

ilyasakin

import { Notify } from 'quasar';

export default class NotificationService {
  private readonly notify: Notify = Notify;

  constructor() {
    this.notify.setDefaults({
      position: 'top-right',
      textColor: 'white',
    });

ilyasakin

export default class LoggingService {
  public log(message: string, payload: unknown = null): void {
    console.log(`%cLOG: %c${message}`, 'color: yellow;', 'color: white');
    
    if (payload) {
      console.log('LOG_PAYLOAD: ', payload);
    }
  }

  public error(message: string, payload: unknown = null): void {

ilyasakin

<template>
  ...
  <Spinner :status="isMainLoaderActive" />
  ...
</template>

<script setup lang="ts">
  // imports ...
  import { loadingService } from '../services/_singletons.ts';

ilyasakin

import LoadingService from './loading.service.ts';

export const loadingService: LoadingService = new LoadingService(); 

ilyasakin

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>(),
  );

ilyasakin

<template>
  ...
  <Spinner :status="isLoading" />
  ...
</template>

<script setup lang="ts">
  // imports ...

  const isLoading = ref<boolean>(false);

ilyasakin

<template>
  ...
  <Spinner :status="isLoading" />
  ...
</template>

<script setup lang="ts">
  const isLoading = ref<boolean>(false);
  
  const onClickSave = () => {