Closing a q-dialog with a lot of content is very very slow
I have a q-dialog component with a custom component as content.
<q-dialog full-height full-width persistent v-model="showEditDialog"> <q-card class="full-height full-width"> <q-card-section class="row"> <div class="text-h6">Edit</div> <q-space /> <q-btn icon="close" flat round dense v-close-popup /> </q-card-section> <q-separator /> <q-card-section style="height:calc(100% - 120px)" class="scroll"> <CustomComponent ...></CustomComponent> </q-card-section> <q-separator /> <q-card-actions align="right"> <q-btn label="Save" color="positive" @click="save()" /> </q-card-actions> </q-card> </q-dialog>
This custom component is a huge form to create a survey with a lot of questions and every question has many other input fields alongside with answers of course.
The dialog close button has the v-close-popup property. When I close the dialog it takes about 10 seconds before it to disappear.
I guess the problem is the amount of content… what I could try to speed up the closing of the dialog before moving my custom component in a page rather than in a q-dialog?
I tried to move the content in a page rather than in a q-dialog but I still have performance problem.
When I click the back button (basically a $router.push() to the list page) it takes several seconds before the page changes.
I can’t understand if my problem is related to Quasar or Vue… maybe they are not suitable for such amount of content?
beets last edited by
@nulele If possible, please make a code pen of the issue, or share some of the code for CustomComponent. You could maybe try using
<CustomComponent v-once ...></CustomComponent>
But I’m not sure how that would affect your component without seeing it. There must be some heavy data-reactivity going on, I would suspect.