Can't update reactive progress loader during 15 seconds rendering

Hey guys,

I hope you are all good!

I am having following issue:

I am having a Vue app which is loading up to 15 different pivot tables with a lot of data.

The entire rendering time takes about 15 seconds.

Within this time period I really would like to display a progress bar up 100 %.

But unfortunately i can’t update the progress bar during the rendering.

It is somehow blocked.

Which recommendations do you have to solve this issue?

The code looks like:

          <template
          v-for="n in (numberOfPivotTables - 1)"
      >
        <!-- Pivot table #1: spot count / ad count -->
        <mdb-col
          sm="12"
          md="12"
          lg="6"
          xl="6"
          :key="n"
        >

          <div class="pt-5 mx-3 pb-5 pr-5">

            <div style="height:350px">
              <h5>{{customPivotOptions[n]['reducerKey']}}</h5>

              <channel-filters
                :hour-options="filters.hour[n]"
                :adtype-options="filters.adType[n]"
                :length-options="filters.spotLength[n]"
                :creative-options="filters.motive[n]"
                :weekday-options="filters.weekday[n]"
                :flight-options="filters.flightId[n]"
                :month-options="filters.month[n]"
                :product-options="filters.product[n]"
                :station-options="filters.station[n]"
                :pivot-table-id="String(n)"
                @getValue="getSelectValue"
              >
              </channel-filters>

              <mdb-row>
                <mdb-col
                  cols="12"
                  sm="2"
                >
                  <mdb-select selectAll search 
                    @getValue="setReducerKey" 
                    :options="customPivotOptions[n].reducerOptions"
                    label="Value" 
                    :arrayId="String(n)"
                    modelName="reducerKey"
                    :visibleOptions="10"
                    placeholder="Choose your Value" /> 
                </mdb-col>
              </mdb-row>
            </div>

            <pivot-table
                :headline="customPivotOptions[n]['reducerKey']"
                :data="pivotData[n].data"
                :pivot-table-id="String(n)"
                :fields="fields[n]"
                :available-field-keys="customPivotOptions[n].availableFieldKeys"
                :row-field-keys="customPivotOptions[n].rowFieldKeys"
                :col-field-keys="customPivotOptions[n].colFieldKeys"
                :default-show-settings="defaultShowSettings"
                :reducer="getReducerKey"
                @getValues="getPivotValues"
                :sum-row="true"
                :sum-column="true"
                :sum-column-custom="{}"
                >
            </pivot-table>

          </div>

        </mdb-col>

            <div v-if="n==7" v-bind:key="n" class="w-100"></div>

      </template>

Thank you and best regards!