AstralRinth/apps/app-frontend/src/components/LoadingIndicatorBar.vue

<script setup>
import { computed, onBeforeUnmount, ref, watch } from 'vue'

import { useLoading } from '@/store/state.js'

const props = defineProps({
	throttle: {
		type: Number,
		default: 0,
	},
	duration: {
		type: Number,
		default: 1000,
	},
	height: {
		type: Number,
		default: 2,
	},
	color: {
		type: String,
		default: 'var(--loading-bar-gradient)',
	},
})

const indicator = useLoadingIndicator({
	duration: props.duration,
	throttle: props.throttle,
})

onBeforeUnmount(() => indicator.clear)

const loading = useLoading()

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

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

	let _timer = null
	let _throttle = null

	function start() {
		clear()
		progress.value = 0
		if (opts.throttle) {
			_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) {
		progress.value = Math.min(100, progress.value + num)
	}

	function _hide() {
		clear()
		setTimeout(() => {
			isLoading.value = false
			setTimeout(() => {
				progress.value = 0
			}, 400)
		}, 500)
	}

	function _startTimer() {
		_timer = setInterval(() => {
			_increase(step.value)
		}, 100)
	}

	return { progress, isLoading, start, finish, clear }
}
</script>

<template>
	<div
		class="loading-indicator-bar"
		:style="{
			'--_width': `${indicator.progress.value}%`,
			'--_height': `${indicator.isLoading.value ? props.height : 0}px`,
			'--_opacity': `${indicator.isLoading.value ? 1 : 0}`,
			top: `0`,
			right: `0`,
			left: `${props.offsetWidth}`,
			pointerEvents: 'none',
			width: `var(--_width)`,
			height: `var(--_height)`,
			borderRadius: `var(--_height)`,
			// opacity: `var(--_opacity)`,
			background: `${props.color}`,
			backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`,
			transition: 'width 0.1s ease-in-out, height 0.1s ease-out',
			zIndex: 6,
		}"
	>
		<slot />
	</div>
</template>
<style lang="scss" scoped>
.loading-indicator-bar::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: var(--_width);
	bottom: 0;
	background-image: radial-gradient(80% 100% at 20% 0%, var(--color-brand) 0%, transparent 80%);
	opacity: calc(var(--_opacity) * 0.1);
	z-index: 5;
	transition:
		width 0.1s ease-in-out,
		opacity 0.1s ease-out;
}
</style>