Slow since upgrade to @quasar/app v2

Describe the bug Hi there, I recently upgraded our project to @quasar/app v2. Before that we used quasar@1.12.4 and @quasar/app@1.9.6. Since that upgrade one of our components suddenly is very unresponsive, there is a 2 second delay between click and action. Where as before the response to the click had no noticable delay.

Has something changed also in that update in one of the component we use in there? I will try to draw our component structure:

<q-dialog>
  <div>
    <q-layout>
      <q-page-container>
        <q-page>
          <q-table grid>
            <q-intersection v-for="i in 1000">
              <q-img></q-img>
            </q-intersection>
          </q-table>
        </q-page>
      </q-page-container>
    </q-layout>
  </div>
</q-dialog>

We have a media gallery with a lot of images (around 1000) with a Q-intersection. Before the upgrade filtering and searching this list was fast and with no (noticable) delay.

Since the upgrade before searching and filtering and even closing the dialog, there is a 2 second delay in which everything is blocked and you cannot do anything. Anyone with ideas about what is happening and why there is such a decrease in performance?

It becomes a lot better once you reduce the number of items but that is of course not a fix for this problem. Especially because it used to work ok.

Codepen/jsFiddle/Codesandbox (required) I hope that one of the developers will see this and think of something that changed recently with one of these components that could have caused this. If that is not the case I will see if I can make a reproducible example.

Video illustrating the behaviour Captures.zip

Expected behavior To be at least just as fast as before

[webnoob]

Great info and this just highlights the fragility of the node eco system 😃 Glad it’s sorted.

[Evertvdw]

Ok, I’ve been at it the whole day yesterday and the conclusion is: I guess it’s something with npm and package.lock.json.

I first created a codesandbox with our exact component and that worked fine. I then moved on to port our whole project onto that same codesandbox, including tests, babel configs, tsconfig and what not. After all that the bug was gone! But that joy soon faded as I found out that in that new setup my unit tests with Jest did not work anymore. Jest decided it did not like class components anymore, giving this error:

TypeError: Object prototype may only be an Object or null: undefined
        at setPrototypeOf (<anonymous>)

       5 | </template>
       6 | 
    >  7 | <script lang="ts">
         | ^
       8 | import Vue from "vue";
       9 | import Component from "vue-class-component";
      10 | // import { Vue, Component } from "vue-property-decorator";

      at extendStatics (src/themes/default/components/static/shortcuts/SearchButton.vue:7:1)

With every unit test involving a Vue component. I spent a few hours trying to fix this with no success. I also tried using yarn instead of npm to install stuff in there but that did not work.

At last I moved back to the original project and removed the package.lock.json and removed node_modules. Then installed again. That solved the problem in this topic and my unit tests kept working 😃

So it is fixed, but it feels like I’m cord dancing here with things breaking so easely and without any clear reason why.

Edit: I found out just now that the Jest errors are due to some old package in the cache of jest. jest --clearCache solves this problem.