Error , list reloads after, open or close v-navigation-drawer on vuetify, causes slowness

Sumary

Using vuetify, v-navigation-drawer or v-main, I identified a severe slowdown in my application when there were many images on the page, and trying to scroll, or open the navigation-drawer, it would hang.

So I inserted logs into the loop and found that the list was reloading when open the panel.

It seems unnoticeable on the list. but, it caused crashes and slowness, when load many images.

I create, in vuetify play , more simple version to demonstrate.

Example LINK

Click here to open a Example In Vuetify Play

Details:

The example should contain a data list a v-for, which will display a lot of data, preferably images, basically a v-for, and a v-navigation-drawer panel

1 Click on button 1 ADD RECORDS TO THE LIST +30 onClick to add, more records, to test.

2 open your console to view logs .

I inserted a command to insert logs inside v-for.

This way I discovered the reason for the slowness.

3 CLEAR THE CONSOLE

use the button, if you see log records in the console, to observe when you will add new logs, when opening the panel

4 - Toggle v-navigation-drawer visible, and observe logs

5 - Conclusion Description Error, cause slowless

Apparently the list is re-rendered after opening the v-navigation-drawer panel. Clean the console. observe the console. when opening v-navigation-drawer, it will add the log records again. with each click + 30 records will be added. It depends on the machine to observe the slowness. In mine, I see slowness with 1000 records. When panel open, the log was added , the list refresh, it is not perceptible, but causes slowess, when opening the panel, and the scrolling lists. Its not perceptible, with simple records, but, cause, very sloly, For me, Its cause very slowly when using more lot records, or 200 images. if you add more records you can see the slowdown happening.

6 This code example:

<template>
  <v-app>
    <v-main>
      <v-card>
        <v-container>
          <v-row>
            <v-col><h1>Error on v-navigation-drawer test.</h1></v-col>
          </v-row>
          <v-row>
            <v-col><h2>Description:</h2></v-col>
          </v-row>
          <v-row>
            <v-col
              ><p>
                Apparently the list is re-rendered after opening the
                v-navigation-drawer panel
              </p></v-col
            >
          </v-row>
          <v-row>
            <v-col>
              <v-btn color="primary" @click="loadList()" variant="outlined">
                1 ADD RECORDS TO THE LIST +30 onClick
              </v-btn>
            </v-col>
            <v-col>
              <p>
                Total de Registros:
                <strong> {{list_products.length}} </strong>
              </p></v-col
            >
          </v-row>
          <v-row></v-row>
          <v-row>
            <v-col
              ><h3>2 open your console to view logs .</h3>
              <p>
                I inserted a command to insert logs inside v-for. This way I
                discovered the reason for the slowness.
              </p></v-col
            >
          </v-row>
          <v-row>
            <v-col></v-col>
          </v-row>
          <v-row>
            <v-col
              ><v-btn
                color="primary"
                @click="clearConsole()"
                variant="outlined"
              >
                3 CLEAR THE CONSOLE
              </v-btn>
            </v-col>
            <v-col
              ><v-switch
                v-model="autoClear"
                label="Auto Clear After Load"
              ></v-switch
            ></v-col>
          </v-row>
          <v-row>
            <v-col
              ><p>
                use the button, if you see log records in the console, to
                observe when you will add new logs, when opening the panel
              </p></v-col
            >
          </v-row>
          <v-row>
            <v-col>
              <v-btn
                color="primary"
                @click.stop="drawer = !drawer"
                variant="outlined"
              >
                4 - Toggle v-navigation-drawer visible, and observe logs
              </v-btn></v-col
            >
            <v-col
              ><v-switch v-model="drawer" label="PANEL IS VISIBLE"></v-switch
            ></v-col>
          </v-row>
          <v-row>
            <v-col><h2>Conclusion Description Error:</h2></v-col>
          </v-row>
          <v-row>
            <v-col
              ><p>
                Apparently the list is re-rendered after opening the
                v-navigation-drawer panel
              </p></v-col
            >
          </v-row>
          <v-row>
            <v-col>
              <p>
                Clean the console. observe the console. when opening
                v-navigation-drawer, it will add the log records again.
              </p>
              <p>
                with each click + 30 records will be added. It depends on the
                machine to observe the slowness. In mine, I see slowness with
                1000 records.
              </p>
              <p>
                the log was added , the list refresh, it is not perceptible, but
                causes slowess, when opening the panel, and the scrolling lists.
                <br />
                For me, Its cause very slowly when using 300 images.
                <br />
                Its not perceptible, with simple records, but, cause, very
                sloly, when loading, 300 images,
              </p>
            </v-col>
          </v-row>
          <v-row
            ><v-col><h2>Table Data</h2></v-col></v-row
          >
          <v-row>
            <v-col>
              <table class=".table-bordered">
                <tbody v-for="prod in list_products" :key="prod.id">
                  <tr>
                    <td>
                      {{prod.title}}
                      {{logDebug("itemreconsultadonalista",prod)}}
                    </td>
                    <td>{{prod.rating}}</td>
                    <td>{{prod.shippingInformation}}</td>
                    <td>{{prod.reviewerName}}</td>
                    <td>{{prod.reviewerEmail}}</td>
                    <td>{{prod.availabilityStatus}}</td>
                    <td>{{prod.availabilityStatus}}</td>
                    <td>{{prod.price}}</td>
                    <td>{{prod.tags}}</td>
                  </tr>
                  <tr>
                    <td colspan="9">{{prod.description}}</td>
                  </tr>
                  <tr>
                    <td colspan="9">
                      <table>
                        <tbody v-for="img in prod.images">
                          <tr>
                            <td><img :src="img" />{{img}}</td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                </tbody>
              </table>
            </v-col>
          </v-row>
        </v-container>
      </v-card>
    </v-main>
    <v-navigation-drawer v-model="drawer" temporary location="right">
      <v-card>
        <v-container>
          <v-btn
            color="primary"
            @click="clearConsole()"
            variant="outlined"
            block
          >
            2 CLEAR THE CONSOLE
          </v-btn>
          <v-btn
            block
            color="primary"
            @click.stop="drawer = !drawer"
            variant="outlined"
          >
            CLOSE
          </v-btn>
        </v-container>
      </v-card>
    </v-navigation-drawer>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      autoClear: true,
      title: 'Error on v-navigation-drawer test.',
      teste_nav: { open: false },
      list_images: [],
      list_products: [],
      drawer: false,
      warns: {
        list: true,
      },

      fake: undefined,
      newName: undefined,
      newNumber: undefined,
      people: [{ name: 'Alpha', number: 1 }],
      headers: [
        { text: 'Name', value: 'name' },
        { text: 'Number', value: 'number' },
        { text: 'Inputs', value: 'name' },
      ],
    }),

    methods: {
      logDebug(pstr, item) {
        console.warn(pstr, item.title)
      },
      clearConsole() {
        console.clear()
      },
      loadList(pstr) {
        console.log('loadList')
        const self = this

        this.warns.list = false

        /* providing access token in bearer */
        fetch('https://dummyjson.com/products', {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        })
          .then(r => r.json())
          .then(json => {
            console.log('json', json)

            for (var i = 0; i < json.products.length; i++) {
              var item = json.products[i]
              self.list_products.push(item)
            }
            window.setTimeout(function () {
              console.clear()
            }, 100)
          })
      },
    },
    
  }
</script>

7 Can anyone tell me what I did wrong??

Thanks!

Upvotes: 0