Issue: I need to show a loading icon while waiting for the table to load.
https://i.sstatic.net/kRCbL.png I am utilizing Boostrap-vue JS, which is built on top of Bootstrap, and VueJS's "b-table" component to display approximately 3000 rows in a table.
The data retrieval through the API is fast, with a response time of about 3 seconds. However, the rendering of the table itself takes much longer. I referred to the documentation that explains setting the table's busy state using table busy state and automated table busy state.
It seems that the mentioned methods only consider the time taken for the data request/response, not the actual rendering time of the table. In my scenario, the table rendering could take up to 30 seconds, and I want to display the loading icon during this process.
Is there a correct way to account for the DOM render time in the busy state?
This is what I have tried so far:
<b-table hover :items="activities.items" busy.sync="true" :fields="activities.fields">
<template v-slot:table-busy>
<div class="text-center text-danger my-2">
<b-spinner class="align-middle"></b-spinner>
<strong>Loading...</strong>
</div>
</template>
</b-table>