Is there a way to fully open the v-dialog before the list is is loaded?

Question

The list inside the dialog has a length of about 360 coins. After clicking the button to open the dialog, there is a delay of about 2-3 seconds before the dialog becomes visible. This is a pretty bad UX as it may seem as if the button didn't work. I would like the list to load once the dialog has become visible. I have tried using v-if="dialog" on the v-list, but it didn't bring me any better results.

Now I was wondering, is there is a Vue or Vuetify way to solve this problem?

Btw, I'm pretty new to JS and Vue.

Here the relevant code:

<v-dialog v-model="dialog">
    <template v-slot:activator="{ on }">
      <v-btn v-on="on">Button</v-btn>
    </template>
    <v-card>
      <div height="100%">
        <v-list style="overflow-y:hidden">
          <v-subheader>Available Coins</v-subheader>
          <v-list-item-group color="primary">
            <v-list-item
              @click="selectCoin(coin)"
              v-for="(coin, coinIndex) in filterCoins"
              :key="coinIndex"
            >
              <v-img
                style="max-width:30px; border-radius:50%"
                :src="coin.logoUrl"
              />
              <v-list-item-content>
                <v-list-item-title
                  style="text-transform:uppercase"
                  v-text="coin.symbol"
                />
              </v-list-item-content>
              <v-list-item-content>
                <v-list-item-title v-text="coin.name" />
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </div>
    </v-card>
  </v-dialog>

data: () => ({
    dialog: false
})

I could help you, but I'll need to take a look at a minimal, reproducible example. Can you share a code playground with me? — Manuel Abascal
@ManuelAbascal I'm not sure how I would set that up. Here is a live version of my project goofy-carson-7f9fa1.netlify.com and here is the full code on github github.com/pywei088/daix-switcher-vuetify — Samuel

Parth Jawale Parth Jawale · Accepted Answer · 2020-03-02T09:03:02

The dialog doesn't open instantly is because your list takes time to render. A good way to improve your UX would be to add a fixed height to your dialog and use Vuetify's skeleton loaders (https://vuetifyjs.com/en/components/skeleton-loaders). These improve user experience by bringing about an illusion of loading.

Is there a way to fully open the v-dialog before the list is is loaded?

1 Answers