Vue.js 是否有办法在加载列表之前完全打开v对话框？

对话框中的列表长度约为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
})

按钮
可用硬币
数据：（）=>({
对话框：false
})

该对话框不会立即打开，因为列表的渲染需要时间。改进用户体验的一个好方法是在对话框中添加一个固定高度，并使用Vuetify的骨架加载程序（）。

---

这些通过带来加载错觉来改善用户体验。

我可以帮助您，但我需要看一看。你能和我共享一个代码游戏场吗？@ManuelAbascal我不知道该怎么设置。这是我的项目的一个实时版本，这是github上的完整代码，我需要立即打开对话框。骨架或固定高度将如何改变这一点？