Level 63
I think that when resizing, your code simply needs to rearrange how the datas are displayed on the screen.
As you have 3000 thousands records, it takes some time.
Can you show the code inside <div v-else>...</div> please ?
Apr 5, 2025
10
Level 27
Spinner when resizing
Hi,
- I have a responsive vue component that show/hide certain elements at different widths
- It shows about 3000 records (Yes, I do want to show all 3000 records on 1 page)
- I have a spinner that shows on page load and disappears after first render is complete, this works the way I want it to
- However, when I shrink the width, the page contents freezes for 3 seconds and then adapts to the new width
- And this 3 second freeze is the problem and the spinner does not show (see my code below)
- Is there a way to make a spinner to also show up when I resize and disappear after it is done?
I'm open to speeding up resize by rendering only some records first, but I do eventually want the 3000 records on that single page, this makes it easier for the user to search and lessen calls to the server
<template>
<div v-if="isLoading">Loading...</div>
<div v-else>
<!-- 3000 records -->
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, nextTick, onUpdated } from 'vue'
const isLoading = ref<boolean>(true)
const json = ref<any>([])
function onResize() {
isLoading.value = true
}
onMounted(async () => {
const response = await fetch('data.json')
json.value = await response.json()
window.addEventListener('resize', onResize)
nextTick(() => {
isLoading.value = false
})
})
onUpdated(() => {
nextTick(() => {
isLoading.value = false
})
})
</script>
Level 27
<table class="border-collapse p-2 border border-primary-900">
<thead>
<tr>
<th
class="border-primary-900 border p-2 [writing-mode:vertical-lr] sm:[writing-mode:horizontal-tb]"
>
1
</th>
<th
class="border-primary-900 border p-2 [writing-mode:vertical-lr] sm:[writing-mode:horizontal-tb]"
>
2
</th>
<th
class="border-primary-900 border p-2 [writing-mode:vertical-lr] sm:[writing-mode:horizontal-tb]"
>
3
</th>
<th
class="border-primary-900 border p-2 [writing-mode:vertical-lr] sm:[writing-mode:horizontal-tb]"
>
4
</th>
<th
class="border-primary-900 border p-2 [writing-mode:vertical-lr] sm:[writing-mode:horizontal-tb]"
>
5
</th>
<th
class="border-primary-900 border p-2 [writing-mode:vertical-lr] sm:[writing-mode:horizontal-tb]"
>
6
</th>
</tr>
</thead>
<tbody v-for="(data, index) in json" class="text-sm">
<tr v-if="canShow(data, index)">
<td class="border-primary-900 border p-2 text-right text-primary-600">
{{ data.a }}<br />
</td>
<td class="border-primary-900 border p-2 text-right">
{{ data.b }}<br /><span class="text-primary-600">{{
data.c ? data.c : ' '
}}</span>
</td>
<td class="border-primary-900 border p-2 text-right">
{{ data.d }}<br /><span class="text-primary-600"
>#{{ index + 1 }}</span
>
</td>
<td class="border-primary-900 border p-2 text-right">
<span :class="warrantyColor(data.e)">{{ data.e }}</span
><br />{{ data.f ? data.f : ' ' }}
</td>
<td class="border-primary-900 border p-2 text-right">
{{ data.g }}<br />{{ data.h ?? ' ' }}
</td>
<td class="border-primary-900 border p-2 text-left">
<a target="_blank" :href="data.i">
<div class="flex justify-items-stretch">
<div class="hidden md:block grow">
{{ data.j }}
</div>
<div class="min-w-8 sm:ml-2 w-8 h-8">
<svg>
</svg>
</div>
</div>
</a>
</td>
</tr>
</tbody>
</table>
1 like
Level 27
Perhaps one other thing I don't understand is, when resizing, I only need the Tailwind to respond to the width changes, I'm not making any state changes, why does Vue get involved to re-render?
1 like
Level 50
@laracoft You are changing the state: you're setting isLoading to true every time the window is resized. Then the record list isn't rendered, only the loading indicator is. After that, the value is set to false, and only then does rendering of the records start.
Rendering 3000 elements isn't instantaneous. I'd rethink the approach, as 3000 elements won't fit on anyone's screen at once and that's a waste of rendering resources. You could use the intersection observer API or some utility library to render just the visible items. Or use pagination with a search feature, which is the norm.
1 like
Level 27
I added isLoading because it was freezing everytime the window resized.
If rendering only starts after isLoading is set to false, why does the table show up correctly immediately after "Loading..." goes away?
I draw comparison of 3000 items in pure HTML, no issues at all (except I have to write alot of javascript manually), so why is it an issue with Vue?
1 like
Level 27
Try resizing the width of this page https://pagedone.io/docs/tables There is a 1-2 second freeze time before the page updates
1 like
Level 50
If rendering only starts after isLoading is set to false, why does the table show up correctly immediately after "Loading..." goes away?
The loading indicator disappears only after the records have finished rendering. Vue doesn't manipulate the page DOM directly; it first renders changes in a virtual DOM, then compares and updates the page DOM as needed. Switching from the loading indicator to the rendered records is relatively fast, as the heavy lifting was done in the virtual DOM. This is much faster than manipulating the page DOM directly, which could trigger unnecessary renders, layout reflows, etc.
When you set isLoading to true, all 3000 records are removed from the DOM. That means Vue has to recreate the entire list from scratch when you switch back. It won't solve performance issues, it introduces new ones.
I draw comparison of 3000 items in pure HTML, no issues at all (except I have to write alot of javascript manually), so why is it an issue with Vue?
It shouldn't be an issue. Once the DOM has been updated, Vue's job is done and the rest is up to the browser. There shouldn't be any difference to statically-rendered HTML. Resizing shouldn't trigger re-renders in Vue — unless you're using resize observers to modify the state like you currently are.
If there's a performance issue, you have to figure out what's causing it. Maybe renders are triggered unnecessarily. Maybe you're using complicated utility classes that cause expensive layout recalculations. I recommend adding console.log() calls to see if renders happen when they shouldn't. You can also use the Performance tab on Chrome Dev Tools (or equivalent) to measure where the delays come from.
Try resizing the width of this page https://pagedone.io/docs/tables There is a 1-2 second freeze time before the page updates
What's the relevance of this page?
1 like
Level 27
What's the relevance of this page?
I have the exact same problem, when I resize the width, the page freezes 1-2s before updated with the responsive content and they don't have 3000 rows
1 like
Level 50
@laracoft It doesn't take 1-2s on my computer. There's a tiny delay, then transition animations. But why do you think it has the exact same problems as your page?
That page isn't built with Vue, it uses jQuery, and it's slow because it's horribly optimized. The page has nearly 19k (!) elements in its DOM, and JS does a lot of work in the main thread. The site doesn't use HTTP 2 or HTTP compression. It doesn't preload critical assets, which leads to a resource loading waterfall. Much of the CSS isn't minified. I could go on. This is just what I could quickly gather from Chrome DevTools. Check the Lighthouse, Network, and Performance tabs there if you're interested.
That page is slow for all sorts of reasons, but your page is probably slow for different reasons. You have to find out what those are. First and foremost, ensure that your page doesn't trigger unnecessary re-renders.
1 like
Level 27
Hmm, I went with pure HTML, CSS and JS, I still have 3k items and less delay than on pagedone.io
1 like
Please or to participate in this conversation.