(bump) nuxt 3.8.0

app.vue

@@ -12,10 +12,12 @@ router.beforeEach(() => {
     NProgress.start();
 });
 router.afterEach(() => {
+    nextTick(() => {
         setTimeout(() => {
             NProgress.done();
         }, 100);
     });
+});
 
 const getDescription = (): string => {
     if (route.meta.description != null && route.meta.description != "") {
@@ -108,7 +110,8 @@ useHead((): Record<string, any> => ({
 <template>
     <div class="text-slate-800 dark:text-slate-200 bg-slate-100 dark:bg-gray-900">
         <NuxtIsland name="commonNoScript">
-            <noscript class="block bg-accent-800 text-white text-center py-1.5 px-3 keep-all relative z-[10005]">Please turn on Javascript from your browser's settings.</noscript>
+            <noscript class="block bg-accent-800 text-white text-center py-1.5 px-3 keep-all relative z-[10005]">Please turn
+                on Javascript from your browser's settings.</noscript>
         </NuxtIsland>
         <NuxtLayout>
             <NuxtPage />

assets/css/nprogress.css

@@ -7,7 +7,7 @@
     background: #4ab300;
 
     position: fixed;
-    z-index: 1031;
+    z-index: 9910;
     top: 0;
     left: 0;
 

components/g/NuxtLink.vue

@@ -10,7 +10,7 @@
 <script setup lang="ts">
 import { cleanDoubleSlashes, withTrailingSlash } from 'ufo';
 import { isLocalPath } from '@/assets/js/misc';
-import { RouteLocationRaw } from '#vue-router';
+import type { RouteLocationRaw } from '#vue-router';
 
 /**
  * TrailingSlashをつけている（pnpm generate時の出力ディレクトリ構造の関係）ので、

components/mk/Loading.vue

@@ -0,0 +1,110 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+    <div :class="[$style.root, { [$style.inline]: inline, [$style.colored]: colored, [$style.mini]: mini, [$style.em]: em }]">
+        <div :class="$style.container">
+            <svg :class="[$style.spinner, $style.bg]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
+                <g transform="matrix(1.125,0,0,1.125,12,12)">
+                    <circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
+                </g>
+            </svg>
+            <svg :class="[$style.spinner, $style.fg, { [$style.static]: static }]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
+                <g transform="matrix(1.125,0,0,1.125,12,12)">
+                    <path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
+                </g>
+            </svg>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+    static?: boolean;
+    inline?: boolean;
+    colored?: boolean;
+    mini?: boolean;
+    em?: boolean;
+}>(), {
+    static: false,
+    inline: false,
+    colored: true,
+    mini: false,
+    em: false,
+});
+</script>
+
+<style lang="scss" module>
+@keyframes spinner {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.root {
+    padding: 32px;
+    text-align: center;
+    cursor: wait;
+
+    --size: 38px;
+
+    &.colored {
+       @apply text-accent-600;
+    }
+
+    &.inline {
+        display: inline;
+        padding: 0;
+        --size: 32px;
+    }
+
+    &.mini {
+        padding: 16px;
+        --size: 32px;
+    }
+
+    &.em {
+        display: inline-block;
+        vertical-align: middle;
+        padding: 0;
+        --size: 1em;
+    }
+}
+
+.container {
+    position: relative;
+    width: var(--size);
+    height: var(--size);
+    margin: 0 auto;
+}
+
+.spinner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--size);
+    height: var(--size);
+    fill-rule: evenodd;
+    clip-rule: evenodd;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-miterlimit: 1.5;
+}
+
+.bg {
+    opacity: 0.275;
+}
+
+.fg {
+    animation: spinner 0.5s linear infinite;
+
+    &.static {
+        animation-play-state: paused;
+    }
+}
+</style>

components/servers/Finder.vue

@@ -82,6 +82,7 @@
                 </div>
                 <div v-else class="rounded-lg p-6 min-h-[40vh] flex items-center sm:col-span-2 md:col-span-2 lg:col-span-2 bg-slate-100 dark:bg-slate-800">
                     <div class="mx-auto text-center">
+                        <MkLoading class="mx-auto"></MkLoading>
                         <p class="max-w-xs">{{ $t('loading') }}</p>
                     </div>
                 </div>

components/servers/Item.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import type { InstanceItem } from 'types/instances-info';
+import type { InstanceItem } from '@/types/instances-info';
 
 defineProps<{
     instance: InstanceItem;

package.json

@@ -28,7 +28,7 @@
     "mfm-js": "^0.23.3",
     "misskey-js": "^0.0.16",
     "nprogress": "^0.2.0",
-    "nuxt": "^3.7.3",
+    "nuxt": "^3.8.0",
     "postcss": "^8.4.29",
     "rellax": "^1.12.1",
     "sass": "^1.66.1",

pages/servers.vue

@@ -34,6 +34,7 @@
                 <ServersFinder @load="setServerStats" />
                 <template #fallback>
                     <div class="container mx-auto max-w-screen-xl p-6">
+                        <MkLoading class="mx-auto text-accent-600"></MkLoading>
                         <p class="text-center">{{ $t('loading') }}</p>
                     </div>
                 </template>