有没有办法在加载列表之前完全打开 v-dialog？

Question

对话框内的列表长度约为 360 个硬币。单击按钮打开对话框后，大约有 2-3 秒的延迟才会显示对话框。这是一个非常糟糕的用户体验，因为它看起来好像按钮不起作用。我希望在对话框可见后加载列表。我曾尝试在 v-list 上使用 v-if="dialog"，但并没有给我带来更好的结果。

现在我想知道，有没有 Vue 或 Vuetify 的方法来解决这个问题？

顺便说一句，我对 JS 和 Vue 还很陌生。

这里是相关代码：

<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
})

Answer 1

对话框没有立即打开是因为您的列表需要时间来呈现。改善用户体验的一个好方法是为对话框添加固定高度并使用 Vuetify 的骨架加载器 (https://vuetifyjs.com/en/components/skeleton-loaders)。 这些通过带来加载错觉来改善用户体验。