puffpastry-frontend/src/composables/useLoading.ts

import { ref, reactive } from "vue";

interface LoadingState {
    [key: string]: boolean;
}

const loading = ref<LoadingState>({});

export const useLoading = () => {
    const register = (identifier: string, state = false) => {
        loading.value[identifier] = state;
    };

    const unregister = (identifier: string) => {
        delete loading.value[identifier];
    };

    const isLoading = (identifier: string): boolean => {
        if (!(identifier in loading.value)) {
            console.warn(`Loading state for "${identifier}" is not registered.`);
            return false;
        }
        return loading.value[identifier];
    };

    const show = (identifier: string) => {
        if (identifier in loading.value) {
            loading.value[identifier] = true;
        } else {
            console.warn(`Cannot show loading for unregistered identifier: "${identifier}"`);
        }
    };

    const hide = (identifier: string) => {
        if (identifier in loading.value) {
            loading.value[identifier] = false;
        } else {
            console.warn(`Cannot hide loading for unregistered identifier: "${identifier}"`);
        }
    };

    const isAnyLoading = (): boolean => {
        return Object.values(loading.value).some(state => state);
    };

    return reactive({
        register,
        unregister,
        isLoading,
        show,
        hide,
        isAnyLoading,
        loadingState: loading
    });
};