From 579ebc3fb609b734fba94778e766618e0b85de08 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Sat, 15 Jul 2023 18:53:53 +0900
Subject: [PATCH] (add) servers: add fallback text

---
 components/servers/Finder.vue | 13 +++++++++++--
 pages/servers.vue             | 12 ++++++------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/components/servers/Finder.vue b/components/servers/Finder.vue
index ed8bae1a..4268bb42 100644
--- a/components/servers/Finder.vue
+++ b/components/servers/Finder.vue
@@ -59,12 +59,17 @@
         <div>
             <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-2">
                 <ServersItem v-if="filteredInstances.length > 0" v-for="item in filteredInstances.slice(0, f_limit)" :instance="item" />
-                <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 v-else-if="data" 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">
                         <img src="https://xn--931a.moe/assets/info.jpg" class="rounded-lg mx-auto mb-4" />
                         <p class="max-w-xs">{{ $t('_servers._list.notFound') }}</p>
                     </div>
                 </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">
+                        <p class="max-w-xs">{{ $t('loading') }}</p>
+                    </div>
+                </div>
                 <button v-if="f_limit < filteredInstances.length" @click="f_limit += 20" class="btn btn-outline-primary btn-lg hover:!text-white block sm:col-span-2 md:col-span-2 lg:col-span-2 px-4">
                     <ArrowIco />{{ $t('_servers._list.showMore') }}
                 </button>
@@ -218,5 +223,9 @@ function switchOrder() {
 </script>
 
 <style scoped>
-
+@screen lg {
+    .server-list {
+        grid-template-columns: 300px 1fr;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/pages/servers.vue b/pages/servers.vue
index 65ca78f7..d429b7f5 100644
--- a/pages/servers.vue
+++ b/pages/servers.vue
@@ -29,9 +29,14 @@
                 </div>
             </template>
         </GHero>
-        <div class="pb-12 lg:mt-12 pt-6 bg-white dark:bg-slate-950">
+        <div class="pb-12 lg:mt-12 pt-6 bg-white dark:bg-slate-950 min-h-screen">
             <ClientOnly>
                 <ServersFinder @load="setServerStats" />
+                <template #fallback>
+                    <div class="container mx-auto max-w-screen-xl p-6">
+                        <p class="text-center">{{ $t('loading') }}</p>
+                    </div>
+                </template>
             </ClientOnly>
         </div>
     </div>
@@ -57,9 +62,4 @@ route.meta.title = t('_servers.title');
 </script>
 
 <style scoped>
-@screen lg {
-    .server-list {
-        grid-template-columns: 300px 1fr;
-    }
-}
 </style>
\ No newline at end of file