🎨

src/client/app/desktop/views/components/notes.vue

@@ -9,7 +9,7 @@
 		<button @click="resolveInitPromise">%i18n:@retry%</button>
 	</div>
 
-	<div class="skeleton" v-if="fetching">
+	<div class="placeholder" v-if="fetching">
 		<template v-for="i in 10">
 			<mk-note-skeleton :key="i"/>
 		</template>
@@ -232,7 +232,7 @@ export default Vue.extend({
 		> *
 			transition transform .3s ease, opacity .3s ease
 
-	> .skeleton
+	> .placeholder
 		padding 32px
 		opacity 0.3
 

src/client/app/desktop/views/components/notifications.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="mk-notifications">
-	<div class="skeleton" v-if="fetching">
+	<div class="placeholder" v-if="fetching">
 		<template v-for="i in 10">
 			<mk-note-skeleton :key="i"/>
 		</template>
@@ -207,7 +207,7 @@ export default Vue.extend({
 		> *
 			transition transform .3s ease, opacity .3s ease
 
-	> .skeleton
+	> .placeholder
 		padding 16px
 		opacity 0.3
 

src/client/app/desktop/views/pages/deck/deck.notes.vue

@@ -2,6 +2,12 @@
 <div class="eamppglmnmimdhrlzhplwpvyeaqmmhxu">
 	<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
 
+	<div class="placeholder" v-if="fetching">
+		<template v-for="i in 10">
+			<mk-note-skeleton :key="i"/>
+		</template>
+	</div>
+
 	<div v-if="!fetching && requestInitPromise != null">
 		<p>%i18n:@error%</p>
 		<button @click="resolveInitPromise">%i18n:@retry%</button>
@@ -205,6 +211,10 @@ export default Vue.extend({
 		> *
 			transition transform .3s ease, opacity .3s ease
 
+	> .placeholder
+		padding 16px
+		opacity 0.3
+
 	> .notes
 		> .date
 			display block

src/client/app/desktop/views/pages/deck/deck.notifications.vue

@@ -1,5 +1,11 @@
 <template>
 <div class="oxynyeqmfvracxnglgulyqfgqxnxmehl">
+	<div class="placeholder" 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">
@@ -14,7 +20,6 @@
 		<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:@more%' }}
 	</button>
 	<p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:@empty%</p>
-	<p class="loading" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 </div>
 </template>
 
@@ -161,6 +166,10 @@ export default Vue.extend({
 		> *
 			transition transform .3s ease, opacity .3s ease
 
+	> .placeholder
+		padding 16px
+		opacity 0.3
+
 	> .notifications
 
 		> .notification:not(:last-child)
@@ -207,13 +216,4 @@ export default Vue.extend({
 		text-align center
 		color #aaa
 
-	> .loading
-		margin 0
-		padding 16px
-		text-align center
-		color #aaa
-
-		> [data-fa]
-			margin-right 4px
-
 </style>

src/client/app/mobile/views/components/notes.vue

@@ -4,7 +4,7 @@
 
 	<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
 
-	<div class="skeleton" v-if="fetching">
+	<div class="placeholder" v-if="fetching">
 		<template v-for="i in 10">
 			<mk-note-skeleton :key="i"/>
 		</template>
@@ -253,7 +253,7 @@ export default Vue.extend({
 			[data-fa]
 				margin-right 8px
 
-	> .skeleton
+	> .placeholder
 		padding 16px
 		opacity 0.3
 

src/client/app/mobile/views/components/notifications.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="mk-notifications">
-	<div class="skeleton" v-if="fetching">
+	<div class="placeholder" v-if="fetching">
 		<template v-for="i in 10">
 			<mk-note-skeleton :key="i"/>
 		</template>
@@ -184,7 +184,7 @@ export default Vue.extend({
 		text-align center
 		color #aaa
 
-	> .skeleton
+	> .placeholder
 		padding 16px
 		opacity 0.3