Modrinth-plus/apps/frontend/src/components/ui/modrinth-loading-indicator.ts

import { computed, defineComponent, h, onBeforeUnmount, ref, watch } from "vue";
import { startLoading, stopLoading, useNuxtApp } from "#imports";

export default defineComponent({
  name: "ModrinthLoadingIndicator",
  props: {
    throttle: {
      type: Number,
      default: 50,
    },
    duration: {
      type: Number,
      default: 500,
    },
    height: {
      type: Number,
      default: 3,
    },
    color: {
      type: [String, Boolean],
      default:
        "repeating-linear-gradient(to right, var(--color-green) 0%, var(--landing-green-label) 100%)",
    },
  },
  setup(props, { slots }) {
    const indicator = useLoadingIndicator({
      duration: props.duration,
      throttle: props.throttle,
    });

    const nuxtApp = useNuxtApp();
    nuxtApp.hook("page:start", () => {
      startLoading();
      indicator.start();
    });
    nuxtApp.hook("page:finish", () => {
      stopLoading();
      indicator.finish();
    });
    onBeforeUnmount(() => indicator.clear);

    const loading = useLoading();

    watch(loading, (newValue) => {
      if (newValue) {
        indicator.start();
      } else {
        indicator.finish();
      }
    });

    return () =>
      h(
        "div",
        {
          class: "nuxt-loading-indicator",
          style: {
            position: "fixed",
            top: 0,
            right: 0,
            left: 0,
            pointerEvents: "none",
            width: `${indicator.progress.value}%`,
            height: `${props.height}px`,
            opacity: indicator.isLoading.value ? 1 : 0,
            background: props.color || undefined,
            backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`,
            transition: "width 0.1s, height 0.4s, opacity 0.4s",
            zIndex: 999999,
          },
        },
        slots,
      );
  },
});

function useLoadingIndicator(opts: { duration: number; throttle: number }) {
  const progress = ref(0);
  const isLoading = ref(false);
  const step = computed(() => 10000 / opts.duration);

  let _timer: any = null;
  let _throttle: any = null;

  function start() {
    clear();
    progress.value = 0;
    if (opts.throttle && import.meta.client) {
      _throttle = setTimeout(() => {
        isLoading.value = true;
        _startTimer();
      }, opts.throttle);
    } else {
      isLoading.value = true;
      _startTimer();
    }
  }
  function finish() {
    progress.value = 100;
    _hide();
  }

  function clear() {
    clearInterval(_timer);
    clearTimeout(_throttle);
    _timer = null;
    _throttle = null;
  }

  function _increase(num: number) {
    progress.value = Math.min(100, progress.value + num);
  }

  function _hide() {
    clear();
    if (import.meta.client) {
      setTimeout(() => {
        isLoading.value = false;
        setTimeout(() => {
          progress.value = 0;
        }, 400);
      }, 500);
    }
  }

  function _startTimer() {
    if (import.meta.client) {
      _timer = setInterval(() => {
        _increase(step.value);
      }, 100);
    }
  }

  return {
    progress,
    isLoading,
    start,
    finish,
    clear,
  };
}