From 0f8847bb747d71ad4ea045128e4e968883bc8556 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 14 Oct 2018 09:47:38 +0900
Subject: Resolve #2618

---
 src/client/app/mobile/views/components/notes.vue        | 17 +++++++++--------
 .../app/mobile/views/components/notifications.vue       | 17 ++++++++++-------
 2 files changed, 19 insertions(+), 15 deletions(-)

(limited to 'src/client/app/mobile/views')

diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 8f0a1ef196..62ab8c442a 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -4,8 +4,10 @@
 
 	<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
 
-	<div class="init" v-if="fetching">
-		%fa:spinner .pulse%%i18n:common.loading%
+	<div class="skeleton" v-if="fetching">
+		<template v-for="i in 10">
+			<mk-note-skeleton :key="i"/>
+		</template>
 	</div>
 
 	<div v-if="!fetching && requestInitPromise != null">
@@ -251,13 +253,12 @@ export default Vue.extend({
 			[data-fa]
 				margin-right 8px
 
-	> .init
-		padding 64px 0
-		text-align center
-		color #999
+	> .skeleton
+		padding 16px
+		opacity 0.3
 
-		> [data-fa]
-			margin-right 4px
+		@media (min-width 500px)
+			padding 32px
 
 	> .empty
 		margin 0 auto
diff --git a/src/client/app/mobile/views/components/notifications.vue b/src/client/app/mobile/views/components/notifications.vue
index d9ea2aea09..fb8a5c1061 100644
--- a/src/client/app/mobile/views/components/notifications.vue
+++ b/src/client/app/mobile/views/components/notifications.vue
@@ -1,5 +1,11 @@
 <template>
 <div class="mk-notifications">
+	<div class="skeleton" v-if="fetching">
+		<template v-for="i in 10">
+			<mk-note-skeleton :key="i"/>
+		</template>
+	</div>
+
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
 	<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications">
 		<template v-for="(notification, i) in _notifications">
@@ -17,7 +23,6 @@
 	</button>
 
 	<p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:@empty%</p>
-	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 </div>
 </template>
 
@@ -179,13 +184,11 @@ export default Vue.extend({
 		text-align center
 		color #aaa
 
-	> .fetching
-		margin 0
+	> .skeleton
 		padding 16px
-		text-align center
-		color #aaa
+		opacity 0.3
 
-		> [data-fa]
-			margin-right 4px
+		@media (min-width 500px)
+			padding 32px
 
 </style>
-- 
cgit v1.2.3-freya