fix(ui): optimize instance creation

src/renderer/windows/main/pages/instances/components/FabricVersionMenu.vue

@@ -0,0 +1,117 @@
+<template>
+  <v-menu
+    v-model="opened"
+    bottom
+    dark
+    full-width
+    :close-on-content-click="false"
+    :disabled="disabled"
+    style="background-color: #303030; overflow-y: hidden;"
+  >
+    <template #activator="{ on }">
+      <slot :on="on" />
+    </template>
+    <v-text-field
+      v-model="filterText"
+      color="green"
+      append-icon="filter_list"
+      :label="$t('filter')"
+      solo
+      dark
+      hide-details
+    >
+      <template #prepend>
+        <v-tooltip top>
+          <template #activator="{ on }">
+            <v-chip
+              :color="showBuggy ? 'green' : ''"
+              icon
+              dark
+              label
+              style="margin: 0px; height: 48px; border-radius: 0;"
+              @click="showBuggy = !showBuggy"
+            >
+              <v-icon v-on="on">bug_report</v-icon>
+            </v-chip>
+          </template>
+          {{ $t('version.showSnapshot') }}
+        </v-tooltip>
+      </template>
+    </v-text-field>
+    <v-list dark class="h-full flex flex-col overflow-auto">
+      <v-list-tile ripple @click="select({ version: '' })">
+        <v-list-tile-avatar>
+          <v-icon>close</v-icon>
+        </v-list-tile-avatar>
+        {{ $t('fabric.disable') }}
+      </v-list-tile>
+      <virtual-list
+        class="h-full overflow-y-auto max-h-[300px]"
+        :data-sources="versions"
+        :data-key="'version'"
+        :data-component="FabricVersionMenuTile"
+        :keep="16"
+        :extra-props="{ select: select }"
+      />
+    </v-list>
+  </v-menu>
+</template>
+
+<script lang=ts>
+import { reactive, toRefs, defineComponent, computed } from '@vue/composition-api'
+import { FabricArtifactVersion } from '@xmcl/installer'
+import FabricVersionMenuTile from './FabricVersionMenuTile.vue'
+import { useFabricVersions, useForgeVersions } from '/@/hooks'
+
+export default defineComponent({
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    minecraft: {
+      type: String,
+      default: undefined,
+    },
+  },
+  setup(props, context) {
+    const data = reactive({
+      opened: false,
+      showBuggy: true,
+      filterText: '',
+    })
+
+    function filterVersion(version: FabricArtifactVersion) {
+      if (!data.showBuggy && !version.stable) return false
+      if (data.filterText.length !== 0) {
+        return version.version.indexOf(data.filterText) !== -1
+      }
+      return true
+    }
+    const { loaderStatus: statuses, loaderVersions: vers } = useFabricVersions()
+    const versions = computed(() => vers.value.filter(filterVersion))
+
+    function selectVersion(item: any) {
+      context.emit('input', item)
+      data.opened = false
+    }
+    return {
+      ...toRefs(data),
+      versions,
+      status: statuses,
+      select: selectVersion,
+      FabricVersionMenuTile,
+    }
+  },
+})
+</script>
+
+<style>
+.v-input__prepend-outer {
+  margin-top: 0px !important;
+  margin-right: 0px !important;
+}
+.v-input__slot {
+  border-radius: 0 !important;
+}
+</style>

src/renderer/windows/main/pages/instances/components/FabricVersionMenuTile.vue

@@ -0,0 +1,34 @@
+<template>
+  <v-list-tile
+    :key="source.version"
+    ripple
+    @click="select(source)"
+  >
+    <v-list-tile-title class="pl-3">{{ source.version }}</v-list-tile-title>
+    <v-list-tile-action style="justify-content: flex-end;">
+      <v-chip v-if="source.stable" label color="green">{{ $t('fabric.version.stable') }} </v-chip>
+      <v-chip v-else label>{{ $t('fabric.version.unstable') }}</v-chip>
+    </v-list-tile-action>
+  </v-list-tile>
+</template>
+
+<script lang=ts>
+import { defineComponent } from '@vue/composition-api'
+import { FabricArtifactVersion } from '@xmcl/installer'
+import { required } from '/@/util/props'
+
+export default defineComponent({
+  props: {
+    source: required<FabricArtifactVersion>(Object),
+    select: required<(version: FabricArtifactVersion) => void>(Function),
+  },
+  setup(props) {
+    const onClick = () => {
+    }
+    return {
+      onClick,
+    }
+  },
+})
+
+</script>

src/renderer/windows/main/pages/instances/components/ForgeVersionMenu.vue

@@ -0,0 +1,118 @@
+<template>
+  <v-menu
+    v-model="opened"
+    bottom
+    dark
+    full-width
+    :close-on-content-click="false"
+    :disabled="disabled"
+    style="background-color: #303030; overflow-y: hidden;"
+  >
+    <template #activator="{ on }">
+      <slot :on="on" />
+    </template>
+    <v-text-field
+      v-model="filterText"
+      color="green"
+      append-icon="filter_list"
+      :label="$t('filter')"
+      solo
+      dark
+      hide-details
+    >
+      <template #prepend>
+        <v-tooltip top>
+          <template #activator="{ on }">
+            <v-chip
+              :color="showBuggy ? 'green' : ''"
+              icon
+              dark
+              label
+              style="margin: 0px; height: 48px; border-radius: 0;"
+              @click="showBuggy = !showBuggy"
+            >
+              <v-icon v-on="on">bug_report</v-icon>
+            </v-chip>
+          </template>
+          {{ $t('version.showSnapshot') }}
+        </v-tooltip>
+      </template>
+    </v-text-field>
+    <v-list dark class="h-full flex flex-col overflow-auto">
+      <v-list-tile ripple @click="select({ version: '' })">
+        <v-list-tile-avatar>
+          <v-icon>close</v-icon>
+        </v-list-tile-avatar>
+        {{ $t('forge.disable') }}
+      </v-list-tile>
+      <virtual-list
+        class="h-full overflow-y-auto max-h-[300px]"
+        :data-sources="versions"
+        :data-key="'version'"
+        :data-component="ForgeVersionMenuTile"
+        :keep="16"
+        :extra-props="{ select: select }"
+      />
+    </v-list>
+  </v-menu>
+</template>
+
+<script lang=ts>
+import { reactive, toRefs, defineComponent, computed } from '@vue/composition-api'
+import ForgeVersionMenuTile from './ForgeVersionMenuTile.vue'
+import { useForgeVersions } from '/@/hooks'
+import { ForgeVersion } from '/@shared/entities/version.schema'
+
+
+export default defineComponent({
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    minecraft: {
+      type: String,
+      default: undefined,
+    },
+  },
+  setup(props, context) {
+    const data = reactive({
+      opened: false,
+      showBuggy: true,
+      filterText: '',
+    })
+
+    function filterForge(version: ForgeVersion) {
+      if (!data.showBuggy && version.type !== 'recommended' && version.type !== 'latest') return false
+      if (data.filterText.length !== 0) {
+        return version.version.indexOf(data.filterText) !== -1
+      }
+      return true
+    }
+    const { statuses, versions: vers } = useForgeVersions(computed(() => props.minecraft))
+    const versions = computed(() => vers.value.filter(filterForge))
+
+    function selectVersion(item: any) {
+      context.emit('input', item)
+      data.opened = false
+    }
+    return {
+      ...toRefs(data),
+      versions,
+      status: statuses,
+      select: selectVersion,
+      ForgeVersionMenuTile,
+    }
+  },
+})
+</script>
+
+<style>
+.v-input__prepend-outer {
+  margin-top: 0px !important;
+  margin-right: 0px !important;
+}
+.v-input__slot {
+  border-radius: 0 !important;
+}
+</style>

src/renderer/windows/main/pages/instances/components/ForgeVersionMenuTile.vue

@@ -0,0 +1,34 @@
+<template>
+  <v-list-tile :key="source.version" ripple @click="select(source)">
+    <v-list-tile-title class="pl-3">{{ source.version }}</v-list-tile-title>
+
+    <v-list-tile-action style="justify-content: flex-end;">
+      <v-chip
+        v-if="source.type !== 'common'"
+        label
+        :color="source.type === 'recommended' ? 'green' : ''"
+      >{{ source.type }}</v-chip>
+    </v-list-tile-action>
+  </v-list-tile>
+</template>
+
+<script lang=ts>
+import { required } from '/@/util/props'
+import { Status } from '/@shared/entities/version'
+import { computed, defineComponent } from '@vue/composition-api'
+import { ForgeVersion } from '@xmcl/installer'
+
+export default defineComponent({
+  props: {
+    source: required<ForgeVersion & { status: Status; date: string }>(Object),
+    select: required<(version: { version: string }) => void>(Function),
+  },
+  setup(props) {
+    const onClick = () => {
+    }
+    return {
+      onClick,
+    }
+  },
+})
+</script>

src/renderer/windows/main/pages/instances/InstanceCard.vue → src/renderer/windows/main/pages/instances/components/InstanceCard.vue

@@ -1,16 +1,19 @@
 <template>
   <v-card
     v-draggable-card
-    v-ripple
+    :ripple="!isBusy"
     color="grey darken-3"
     class="draggable-card w-full flex flex-col"
     style="padding: 0;"
     hover
     dark
-    draggable
+    :draggable="!isBusy"
     @click="$emit('click', $event)"
     @dragstart="onDragStart"
   >
+    <div v-if="isBusy" class="absolute w-full h-full flex items-center justify-center">
+      <v-progress-circular class="z-10" :size="100" :width="4" indeterminate></v-progress-circular>
+    </div>
     <v-img class="white--text favicon grey darken-2 max-h-50" :src="image">
       <v-layout fill-height class="justify-center flex-col relative">
         <v-flex flexbox class="justify-center items-center">
@@ -78,16 +81,18 @@
 <script lang=ts>
 import { defineComponent, reactive, toRefs, computed } from '@vue/composition-api'
 import unknownServer from '/@/assets/unknown_server.png'
-import { useInstanceServerStatus } from '/@/hooks'
+import { useBusy, useInstanceServerStatus } from '/@/hooks'
 import { Instance } from '/@shared/entities/instance'
 import { required } from '/@/util/props'
 import { getBanner } from '/@/util/banner'
+import { write } from '/@shared/util/mutex'
 
 export default defineComponent({
   props: {
     instance: required<Instance>(Object),
   },
   setup(props, context) {
+    const isBusy = useBusy(write(props.instance.path))
     function onDragStart(event: DragEvent) {
       event.dataTransfer!.effectAllowed = 'move'
     }
@@ -103,6 +108,7 @@ export default defineComponent({
       return unknownServer
     })
     return {
+      isBusy,
       image,
       status,
       description: computed(() => props.instance.description),