diff options
| author | syuilo <syuilotan@yahoo.co.jp> | 2018-10-14 09:47:38 +0900 |
|---|---|---|
| committer | syuilo <syuilotan@yahoo.co.jp> | 2018-10-14 09:47:38 +0900 |
| commit | 0f8847bb747d71ad4ea045128e4e968883bc8556 (patch) | |
| tree | af61e3b330875203f6f70f804e69d6cd758eee8a /src/client/app/mobile/views/components | |
| parent | Merge branch 'develop' of https://github.com/syuilo/misskey into develop (diff) | |
| download | misskey-0f8847bb747d71ad4ea045128e4e968883bc8556.tar.gz misskey-0f8847bb747d71ad4ea045128e4e968883bc8556.tar.bz2 misskey-0f8847bb747d71ad4ea045128e4e968883bc8556.zip | |
Resolve #2618
Diffstat (limited to 'src/client/app/mobile/views/components')
| -rw-r--r-- | src/client/app/mobile/views/components/notes.vue | 17 | ||||
| -rw-r--r-- | src/client/app/mobile/views/components/notifications.vue | 17 |
2 files changed, 19 insertions, 15 deletions
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> |