vue-scoped-loading

// 1. Assume there is an asynchronous function defined as follows
const someAsyncFunc = async (delayAmount: number) => {
  await delay(delayAmount);
  return {
    message: 'Hello world !!!',
  };
};

// 2. Obtain the root loading scope
//    * In this example, we are obtaining the root scope, but you can also use useScopedLoading to use the nearest scope.
const loading = useLoading();

// 3. Retrieve the function wrapped with LoadingScope.create function
const withLoadingFunc = loading.create(someAsyncFunc);

async function someHandler() {
  // 4. It is executable with exactly the same arguments and return value structure as the original function. Loading is displayed until this process is completed.
  //    Even if an execution-time exception occurs in someAsyncFunc(), the loading display will end.
  const result = await withLoadingFunc(3000);

  console.log(result.message); // > Hello world !!!

const loading = useLoading();

// The `proxyFn` function is a Proxy function defined by the `createProgressHandler` method.
// When called, it is possible to reference the `LoadingRequest` instance, and by setting progress within it, it will be reflected in the overall progress of the loading scope.
// If there are multiple loading display requests within the loading scope, their total value is calculated as the progress rate.
const proxyFn = loading.createProgressHandler(
  (request) => async (delaySeconds: number) => {
    if (delaySeconds === 0) return;

    for (let current = 0; current < delaySeconds; current++) {
      request.progress = (current / delaySeconds) * 100;
      await delay(1000);
    }
  },
);

const someHandler = () => {
  await proxyFn(3);
  console.log('3 seconds have passed');
};

const loading = useLoading();

// The loading display will be shown until the function passed as the first argument completes, and the return value will be obtained upon completion.
// If an exception occurs during execution, the loading display will safely be hidden.
const result = await loadingScope.request(() => fetch('https://hoge.fuga.com'));

// The function can also reference the `LoadingRequest` instance via its first argument. You can set the progress rate and other settings.
const result = await loadingScope.request((request) => {
  let succeeded = 0;
  const increment = () => {
    succeeded++;
    request.progress = (succeeded / 3) * 100;
  };
  return Promise.all([
    fetch('https://hoge.1.com').then((res) => {
      increment();
      return res;
    }),
    fetch('https://hoge.2.com').then((res) => {
      increment();
      return res;
    }),
    fetch('https://hoge.3.com').then((res) => {
      increment();
      return res;
    }),
  ])
});