MrSphay/Modrinth-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: project card preload on hover (#5348)

Browse Source
This commit is contained in:
Truman Gao
2026-02-09 16:37:58 -07:00
committed by GitHub
parent a536d795f3
commit cec35dcb60
2 changed files with 21 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
apps/frontend/src/pages/discover/[type]/index.vue
View File

@@ -37,7 +37,7 @@ import {
} from '@modrinth/ui' } from '@modrinth/ui'
import { capitalizeString, cycleValue, type Mod as InstallableMod } from '@modrinth/utils' import { capitalizeString, cycleValue, type Mod as InstallableMod } from '@modrinth/utils'
import { useQueryClient } from '@tanstack/vue-query' import { useQueryClient } from '@tanstack/vue-query'
import { useThrottleFn } from '@vueuse/core' import { useThrottleFn, useTimeoutFn } from '@vueuse/core'
import { computed, type Reactive, watch } from 'vue' import { computed, type Reactive, watch } from 'vue'
import LogoAnimated from '~/components/brand/LogoAnimated.vue' import LogoAnimated from '~/components/brand/LogoAnimated.vue'
@@ -63,18 +63,21 @@ const { handleError } = injectNotificationManager()
const modrinthClient = injectModrinthClient() const modrinthClient = injectModrinthClient()
const queryClient = useQueryClient() const queryClient = useQueryClient()
let prefetchTimeout: ReturnType<typeof setTimeout> | null = null let prefetchTimeout: ReturnType<typeof useTimeoutFn> | null = null
const HOVER_DURATION_TO_PREFETCH_MS = 500
function handleProjectHover(result: Labrinth.Search.v2.ResultSearchProject) { const handleProjectMouseEnter = (result: Labrinth.Search.v2.ResultSearchProject) => {
if (prefetchTimeout) clearTimeout(prefetchTimeout) const slug = result.slug || result.project_id
prefetchTimeout = setTimeout(() => { prefetchTimeout = useTimeoutFn(
const slug = result.slug || result.project_id () => queryClient.prefetchQuery(projectQueryOptions.v2(slug, modrinthClient)),
queryClient.prefetchQuery(projectQueryOptions.v2(slug, modrinthClient)) HOVER_DURATION_TO_PREFETCH_MS,
queryClient.prefetchQuery(projectQueryOptions.v3(result.project_id, modrinthClient)) { immediate: false },
queryClient.prefetchQuery(projectQueryOptions.members(result.project_id, modrinthClient)) )
queryClient.prefetchQuery(projectQueryOptions.dependencies(result.project_id, modrinthClient)) prefetchTimeout.start()
queryClient.prefetchQuery(projectQueryOptions.versionsV3(result.project_id, modrinthClient)) }
}, 150)
const handleProjectHoverEnd = () => {
if (prefetchTimeout) prefetchTimeout.stop()
} }
const currentType = computed(() => const currentType = computed(() =>
@@ -694,7 +697,8 @@ useSeoMeta({
:layout=" :layout="
resultsDisplayMode === 'grid' || resultsDisplayMode === 'gallery' ? 'grid' : 'list' resultsDisplayMode === 'grid' || resultsDisplayMode === 'gallery' ? 'grid' : 'list'
" "
@hover="handleProjectHover(result)" @mouseenter="handleProjectMouseEnter(result)"
@mouseleave="handleProjectHoverEnd"
> >
<template v-if="flags.showDiscoverProjectButtons || server" #actions> <template v-if="flags.showDiscoverProjectButtons || server" #actions>
<template v-if="flags.showDiscoverProjectButtons"> <template v-if="flags.showDiscoverProjectButtons">

6
packages/ui/src/components/project/card/ProjectCard.vue
View File

@@ -4,7 +4,8 @@
<AutoLink <AutoLink
:to="link" :to="link"
class="rounded-xl no-outline no-click-animation custom-focus-indicator" class="rounded-xl no-outline no-click-animation custom-focus-indicator"
@mouseenter="$emit('hover')" @mouseenter="$emit('mouseenter')"
@mouseleave="$emit('mouseleave')"
></AutoLink> ></AutoLink>
</template> </template>
<div v-if="layout === 'grid'" :class="[baseCardStyle, 'flex flex-col']"> <div v-if="layout === 'grid'" :class="[baseCardStyle, 'flex flex-col']">
@@ -153,7 +154,8 @@ import ProjectCardTags from './ProjectCardTags.vue'
import ProjectCardTitle from './ProjectCardTitle.vue' import ProjectCardTitle from './ProjectCardTitle.vue'
defineEmits<{ defineEmits<{
hover: [] mouseenter: []
mouseleave: []
}>() }>()
const props = defineProps<{ const props = defineProps<{