feat: shared loading state + cleanup loading state management (#5835)
* feat: implement shared loading bar component and polished loading states across the app * feat: align loading states + ensureQueryData changes * fix: lint + bugs * fix: skeleton for manage servers page * fix: merge conflict fix
This commit is contained in:
Calum H.
148
packages/ui/src/components/base/LoadingBar.vue
Normal file
148
packages/ui/src/components/base/LoadingBar.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, ref, watch } from 'vue'
|
||||
|
||||
import { injectLoadingState } from '#ui/providers/loading-state'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
/** Bar height in pixels. */
|
||||
height?: number
|
||||
/** Background gradient. Defaults to the brand green. */
|
||||
color?: string
|
||||
/** Total bar fill duration in ms (visual progress easing). */
|
||||
duration?: number
|
||||
/** Delay in ms before the bar becomes visible after a load begins. */
|
||||
throttle?: number
|
||||
/** CSS position. Use `absolute` when wrapping in a custom positioned container (e.g. desktop top-bar offset). */
|
||||
position?: 'fixed' | 'absolute'
|
||||
/** Top offset CSS value. */
|
||||
offsetTop?: string
|
||||
/** Left offset CSS value. */
|
||||
offsetLeft?: string
|
||||
/** Right offset CSS value. */
|
||||
offsetRight?: string
|
||||
}>(),
|
||||
{
|
||||
height: 2,
|
||||
color: 'var(--loading-bar-gradient)',
|
||||
duration: 1000,
|
||||
throttle: 0,
|
||||
position: 'fixed',
|
||||
offsetTop: '0',
|
||||
offsetLeft: '0',
|
||||
offsetRight: '0',
|
||||
},
|
||||
)
|
||||
|
||||
const loadingState = injectLoadingState(null)
|
||||
|
||||
const progress = ref(0)
|
||||
const isVisible = ref(false)
|
||||
const step = computed(() => 10000 / props.duration)
|
||||
|
||||
let _timer: ReturnType<typeof setInterval> | null = null
|
||||
let _throttle: ReturnType<typeof setTimeout> | null = null
|
||||
let _hideTimeout: ReturnType<typeof setTimeout> | null = null
|
||||
let _resetTimeout: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
function clearTimers() {
|
||||
if (_timer) clearInterval(_timer)
|
||||
if (_throttle) clearTimeout(_throttle)
|
||||
if (_hideTimeout) clearTimeout(_hideTimeout)
|
||||
if (_resetTimeout) clearTimeout(_resetTimeout)
|
||||
_timer = null
|
||||
_throttle = null
|
||||
_hideTimeout = null
|
||||
_resetTimeout = null
|
||||
}
|
||||
|
||||
function startTimer() {
|
||||
if (typeof window === 'undefined') return
|
||||
_timer = setInterval(() => {
|
||||
progress.value = Math.min(100, progress.value + step.value)
|
||||
}, 100)
|
||||
}
|
||||
|
||||
function start() {
|
||||
clearTimers()
|
||||
progress.value = 0
|
||||
if (props.throttle && typeof window !== 'undefined') {
|
||||
_throttle = setTimeout(() => {
|
||||
isVisible.value = true
|
||||
startTimer()
|
||||
}, props.throttle)
|
||||
} else {
|
||||
isVisible.value = true
|
||||
startTimer()
|
||||
}
|
||||
}
|
||||
|
||||
function finish() {
|
||||
progress.value = 100
|
||||
clearTimers()
|
||||
if (typeof window === 'undefined') {
|
||||
isVisible.value = false
|
||||
progress.value = 0
|
||||
return
|
||||
}
|
||||
_hideTimeout = setTimeout(() => {
|
||||
isVisible.value = false
|
||||
_resetTimeout = setTimeout(() => {
|
||||
progress.value = 0
|
||||
}, 400)
|
||||
}, 500)
|
||||
}
|
||||
|
||||
if (loadingState) {
|
||||
watch(
|
||||
() => loadingState.pending.value && loadingState.barEnabled.value,
|
||||
(active) => {
|
||||
if (active) start()
|
||||
else finish()
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
}
|
||||
|
||||
onBeforeUnmount(clearTimers)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="modrinth-loading-bar"
|
||||
:style="{
|
||||
position: props.position,
|
||||
top: props.offsetTop,
|
||||
right: props.offsetRight,
|
||||
left: props.offsetLeft,
|
||||
pointerEvents: 'none',
|
||||
width: `${progress}%`,
|
||||
height: `${isVisible ? props.height : 0}px`,
|
||||
borderRadius: `${props.height}px`,
|
||||
background: props.color,
|
||||
backgroundSize: `${(100 / Math.max(progress, 0.01)) * 100}% auto`,
|
||||
opacity: isVisible ? 1 : 0,
|
||||
transition: 'width 0.1s ease-in-out, height 0.1s ease-out, opacity 0.4s',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.modrinth-loading-bar {
|
||||
z-index: 999999;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-image: radial-gradient(80% 100% at 20% 0%, var(--color-brand) 0%, transparent 80%);
|
||||
opacity: 0.1;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
98
packages/ui/src/components/base/ReadyTransition.vue
Normal file
98
packages/ui/src/components/base/ReadyTransition.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* If `pending` is false on mount and never becomes true, the slot renders with no
|
||||
* enter transition (cache-hit fast path). After a real pending phase, transitions
|
||||
* behave as before for subsequent toggles.
|
||||
*/
|
||||
import type { Ref } from 'vue'
|
||||
import { computed, onBeforeUnmount, ref, toRef, watch } from 'vue'
|
||||
|
||||
import { injectLoadingState } from '#ui/providers/loading-state'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
/** True while the wrapped content is still loading. Slot stays blank, loading bar runs. */
|
||||
pending: boolean | Ref<boolean>
|
||||
/** Fade duration applied to the slot when content reveals. */
|
||||
duration?: number
|
||||
/** When true, do NOT register a token with the global loading bar — only fade locally. */
|
||||
silent?: boolean
|
||||
}>(),
|
||||
{
|
||||
duration: 200,
|
||||
silent: false,
|
||||
},
|
||||
)
|
||||
|
||||
const pendingRef = toRef(props, 'pending') as Ref<boolean | Ref<boolean>>
|
||||
const resolvedPending = computed(() => {
|
||||
const v = pendingRef.value
|
||||
if (typeof v === 'boolean') return v
|
||||
return Boolean((v as Ref<boolean>).value)
|
||||
})
|
||||
|
||||
const hasBeenPending = ref(false)
|
||||
const useShell = computed(() => resolvedPending.value || hasBeenPending.value)
|
||||
|
||||
const loadingState = injectLoadingState(null)
|
||||
let token: symbol | null = null
|
||||
|
||||
function release() {
|
||||
if (token && loadingState) {
|
||||
loadingState.end(token)
|
||||
}
|
||||
token = null
|
||||
}
|
||||
|
||||
watch(
|
||||
resolvedPending,
|
||||
(now) => {
|
||||
if (now) {
|
||||
hasBeenPending.value = true
|
||||
}
|
||||
if (loadingState && !props.silent && typeof window !== 'undefined') {
|
||||
if (now) {
|
||||
if (!token) token = loadingState.begin()
|
||||
} else {
|
||||
release()
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
onBeforeUnmount(release)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="useShell">
|
||||
<Transition name="ready-fade" mode="out-in" :duration="props.duration">
|
||||
<div v-if="!resolvedPending" key="content" class="ready-transition-content">
|
||||
<slot />
|
||||
</div>
|
||||
<div v-else key="pending" aria-hidden="true" class="ready-transition-pending" />
|
||||
</Transition>
|
||||
</template>
|
||||
<slot v-else />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ready-fade-enter-active,
|
||||
.ready-fade-leave-active {
|
||||
transition: opacity v-bind('`${props.duration}ms`') ease-in-out;
|
||||
}
|
||||
|
||||
.ready-fade-enter-from,
|
||||
.ready-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ready-transition-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ready-transition-pending {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -43,6 +43,7 @@ export { default as IconSelect } from './IconSelect.vue'
|
||||
export { default as IntlFormatted } from './IntlFormatted.vue'
|
||||
export type { JoinedButtonAction } from './JoinedButtons.vue'
|
||||
export { default as JoinedButtons } from './JoinedButtons.vue'
|
||||
export { default as LoadingBar } from './LoadingBar.vue'
|
||||
export { default as LoadingIndicator } from './LoadingIndicator.vue'
|
||||
export { default as ManySelect } from './ManySelect.vue'
|
||||
export { default as MarkdownEditor } from './MarkdownEditor.vue'
|
||||
@@ -62,6 +63,7 @@ export { default as ProgressBar } from './ProgressBar.vue'
|
||||
export { default as ProgressSpinner } from './ProgressSpinner.vue'
|
||||
export { default as RadialHeader } from './RadialHeader.vue'
|
||||
export { default as RadioButtons } from './RadioButtons.vue'
|
||||
export { default as ReadyTransition } from './ReadyTransition.vue'
|
||||
export { default as ScrollablePanel } from './ScrollablePanel.vue'
|
||||
export { default as ServerNotice } from './ServerNotice.vue'
|
||||
export { default as SettingsLabel } from './SettingsLabel.vue'
|
||||
|
||||
Reference in New Issue
Block a user