fix(frontend): 表示するものがないときにはMkResultを使用するように (#16740)

2 files changed, 9 insertions, 2 deletions

diff --git a/packages/frontend/src/pages/ads.vue b/packages/frontend/src/pages/ads.vue
index 31b66584d9..d1e8477354 100644
--- a/packages/frontend/src/pages/ads.vue
+++ b/packages/frontend/src/pages/ads.vue
@@ -6,9 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <PageWithHeader>
 	<div class="_spacer" style="--MI_SPACER-w: 500px;">
-		<div class="_gaps">
+		<div v-if="instance.ads.length > 0" class="_gaps">
 			<MkAd v-for="ad in instance.ads" :key="ad.id" :specify="ad"/>
 		</div>
+		<MkResult v-else type="empty"/>
 	</div>
 </PageWithHeader>
 </template>
diff --git a/packages/frontend/src/pages/explore.roles.vue b/packages/frontend/src/pages/explore.roles.vue
index 7ee01610a7..1641408df1 100644
--- a/packages/frontend/src/pages/explore.roles.vue
+++ b/packages/frontend/src/pages/explore.roles.vue
@@ -5,9 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="_spacer" style="--MI_SPACER-w: 700px;">
-	<div class="_gaps_s">
+	<div v-if="roles != null && roles.length > 0" class="_gaps_s">
 		<MkRolePreview v-for="role in roles" :key="role.id" :role="role" :forModeration="false"/>
 	</div>
+	<MkLoading v-else-if="loading" />
+	<MkResult v-else type="empty" :text="i18n.ts.noRole"/>
 </div>
 </template>
 
@@ -15,12 +17,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkRolePreview from '@/components/MkRolePreview.vue';
+import { i18n } from '@/i18n.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 
 const roles = ref<Misskey.entities.Role[] | null>(null);
+const loading = ref(true);
 
 misskeyApi('roles/list').then(res => {
 	roles.value = res.filter(x => x.target === 'manual').sort((a, b) => b.displayOrder - a.displayOrder);
+}).finally(() => {
+	loading.value = false;
 });
 </script>