Индикатор загрузки состояния занятости таблицы Boostrap Vue JS

Question

Проблема: я хочу отобразить значок загруженной загрузки, когда таблица все еще загружается.

Я использую Boostrap-vue JS, которая основана на Boostrap, и яЯ использую компонент "b-таблицы" VueJS, я покажу около 3000 строк в этой таблице.

Запрос API для получения данных очень быстрый, около 3 секунд для ответа, но рендеринг таблицы намногодольше, чем это. Я смотрю документацию, в которой показано, как установить состояние занятости таблицы, используя состояние занятости таблицы и автоматическое состояние занятости таблицы .

Однако, если только я не прочиталдокумент, он обрабатывает состояние занятости как за время, необходимое для фактического запроса / ответа самих данных. В моем случае это не работает, потому что рендеринг этих данных в таблице может занять 30 секунд, и я хочу показать значок загрузки в это время.

Есть ли правильный способ сделать это и включить время рендеринга DOMв занятое время?

Моя попытка с кодом до сих пор,

    <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>

Answer 1

Вы не решите эту проблему таким способом (то, что вы описали, физически невозможно, потому что ваша страница отображается с 0 кадрами в секунду из-за задержки). Вам необходимо использовать библиотеки libs, которые работают с виртуальным DOM, например this . В противном случае ваш стол будет зависать и недружелюбен к пользователю.