fix draw timing

docs/_payload.json

@@ -1 +1 @@
-[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1722084082668]
+[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1722084855323]

docs/assets/builds/latest.json

@@ -1 +1 @@
-{"id":"7c1674ba-d3ab-42f8-a69a-13907389b823","timestamp":1722084073691}
+{"id":"c3c07807-23c8-44e3-8c81-d82fca11e41f","timestamp":1722084846061}

docs/assets/builds/meta/c3c07807-23c8-44e3-8c81-d82fca11e41f.json

@@ -0,0 +1 @@
+{"id":"c3c07807-23c8-44e3-8c81-d82fca11e41f","timestamp":1722084846061,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":["/"]}

packages/docs/components/MeshMap.vue

@@ -1,52 +1,51 @@
 <template>
   <div class="relative">
-    <div class="absolute top-2 left-2 z-10 flex items-center">
-      <UInput
-        v-model="selectedCode"
-        name="selectedCode"
-        placeholder="メッシュコード"
-        icon="i-heroicons-magnifying-glass-20-solid"
-        autocomplete="off"
-        size="md"
-        :ui="{ icon: { trailing: { pointer: '' } } }"
-      >
-        <template #trailing>
-          <UButton
-            v-show="selectedCode !== ''"
-            color="gray"
-            variant="link"
-            icon="i-heroicons-x-mark-20-solid"
-            :padded="false"
-            @click="selectedCode = ''"
-          />
-        </template>
-      </UInput>
-      <UButton
-        v-if="isValidCode"
-        :icon="copyButtonIcon"
-        color="white"
-        variant="solid"
-        size="md"
-        class="ml-2"
-        @click="onCopy">
-        {{ copyButtonText }}
-      </UButton>
-    </div>
-    <div class="absolute top-2 right-2 z-10 flex items-center">
-      <USelectMenu v-model="selectedLevel" :options="MESH_LEVELS" class="w-80" :disabled="fixedLevel">
-        <template #label>
-          <UBadge variant="outline" class="w-12 justify-center">{{ selectedLevel.level }}</UBadge>
-          <span class="truncate">{{ selectedLevel.name }}</span>
-        </template>
-        <template #option="{ option: mesh }">
-          <UBadge variant="outline" class="w-12 justify-center">{{ mesh.level }}</UBadge>
-          <span class="truncate">{{ mesh.name }}</span>
-        </template>
-      </USelectMenu>
-      <!-- <UTooltip text="メッシュレベルを固定する">
-        <UToggle v-model="fixedLevel" class="mx-2"/>
-      </UTooltip> -->
-    </div>
+    <template v-if="loaded">
+      <div class="absolute top-2 left-2 z-10 flex items-center">
+        <UInput
+          v-model="selectedCode"
+          name="selectedCode"
+          placeholder="メッシュコード"
+          icon="i-heroicons-magnifying-glass-20-solid"
+          autocomplete="off"
+          size="md"
+          :ui="{ icon: { trailing: { pointer: '' } } }"
+        >
+          <template #trailing>
+            <UButton
+              v-show="selectedCode !== ''"
+              color="gray"
+              variant="link"
+              icon="i-heroicons-x-mark-20-solid"
+              :padded="false"
+              @click="selectedCode = ''"
+            />
+          </template>
+        </UInput>
+        <UButton
+          v-if="isValidCode"
+          :icon="copyButtonIcon"
+          color="white"
+          variant="solid"
+          size="md"
+          class="ml-2"
+          @click="onCopy">
+          {{ copyButtonText }}
+        </UButton>
+      </div>
+      <div class="absolute top-2 right-2 z-10 flex items-center">
+        <USelectMenu v-model="selectedLevel" :options="MESH_LEVELS" class="w-80">
+          <template #label>
+            <UBadge variant="outline" class="w-12 justify-center">{{ selectedLevel.level }}</UBadge>
+            <span class="truncate">{{ selectedLevel.name }}</span>
+          </template>
+          <template #option="{ option: mesh }">
+            <UBadge variant="outline" class="w-12 justify-center">{{ mesh.level }}</UBadge>
+            <span class="truncate">{{ mesh.name }}</span>
+          </template>
+        </USelectMenu>
+      </div>
+    </template>
     <div id="map" />
   </div>
 </template>
@@ -65,9 +64,9 @@ const colorMode = useColorMode()
 
 const selectedCode = ref<string>(route.query.code as string || '')
 const selectedLevel = ref(MESH_LEVELS[0])
-const fixedLevel = ref(false)
 let map: Map | null = null
 
+const loaded = ref(false)
 const copied = ref(false)
 
 const mapStyleUrl = computed(() => colorMode.preference === 'light' ? MAP_STYLE.LIGHT : MAP_STYLE.DARK)
@@ -102,24 +101,12 @@ watch(selectedCode, (code) => {
 
 watch(selectedLevel, (mesh) => {
   if (!map) return
-  fixedLevel.value = false
   const zoom = map.getZoom()
   if (zoom <= mesh.minZoom || zoom > mesh.maxZoom) {
     map.setZoom(mesh.maxZoom)
   }
 })
 
-watch(fixedLevel, (value) => {
-  if (!map) return
-  if (value) {
-    map.setMinZoom(selectedLevel.value.minZoom)
-    map.setMaxZoom(selectedLevel.value.maxZoom)
-  } else {
-    map.setMinZoom(4)
-    map.setMaxZoom(18)
-  }
-})
-
 onMounted(() => {
   let defaultCenter: maplibregl.LngLatLike = [138.517821, 34.380147]
   let defaultZoom = 4
@@ -145,6 +132,7 @@ onMounted(() => {
   map.on('load', () => {
     if (!map) return
 
+    loaded.value = true
     drawMesh(map, defaultLevel)
     map.on('click', `polygon-mesh-fill`, (e) => {
       const features = e.features as maplibregl.MapGeoJSONFeature[];