forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: timeout chart re-render (#629)
authored by
Alec Lloyd Probert
and committed by
GitHub
d99bc67c
fea10d07
+13
-10
+13
-10
app/components/PackageDownloadAnalytics.vue
+13
-10
app/components/PackageDownloadAnalytics.vue
···
21
21
22
22
const chartKey = ref(0)
23
23
24
-
function nextAnimationFrame(): Promise<void> {
25
-
return new Promise(resolve => {
26
-
requestAnimationFrame(() => resolve())
27
-
})
28
-
}
24
+
let chartRemountTimeoutId: ReturnType<typeof setTimeout> | null = null
29
25
30
-
onMounted(async () => {
26
+
onMounted(() => {
31
27
rootEl.value = document.documentElement
32
28
resolvedMode.value = colorMode.value === 'dark' ? 'dark' : 'light'
33
29
34
30
// If the chart is painted too early, built-in auto-sizing does not adapt to the final container size
35
-
await nextAnimationFrame()
36
-
await nextAnimationFrame()
37
-
await nextAnimationFrame()
38
-
chartKey.value += 1
31
+
chartRemountTimeoutId = setTimeout(() => {
32
+
chartKey.value += 1
33
+
chartRemountTimeoutId = null
34
+
}, 10)
35
+
})
36
+
37
+
onBeforeUnmount(() => {
38
+
if (chartRemountTimeoutId !== null) {
39
+
clearTimeout(chartRemountTimeoutId)
40
+
chartRemountTimeoutId = null
41
+
}
39
42
})
40
43
41
44
const { colors } = useCssVariables(