improve loading spinner

This commit is contained in:
Nolan Lawson 2018-01-19 00:51:51 -08:00
parent e7f94de70c
commit 0360672d49
4 changed files with 31 additions and 28 deletions

View file

@ -1,23 +1,33 @@
{{#await promise}} <div class="lazy-timeline">
<div class="loading-page"> {{#if loading}}
{{#if trueValue}} <!-- hack to get the transition to work -->
<div transition:fade> <div transition:fade>
<div class="loading-page">
<LoadingSpinner /> <LoadingSpinner />
</div> </div>
</div>
{{/if}} {{/if}}
{{#await promise}}
{{then constructor}}
<:Component {constructor} :timeline on:initialized="set({'loading': false})"/>
{{catch error}}
<div>Component failed to load. Please try refreshing! {{error}}</div>
{{/await}}
</div> </div>
{{then constructor}}
<:Component {constructor} :timeline />
{{catch error}}
<div>Component failed to load. Please try refreshing! {{error}}</div>
{{/await}}
<style> <style>
.loading-page { .lazy-timeline {
width: 100%; width: 100%;
min-height: 50vh; min-height: 60vh;
}
.loading-page {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 50
} }
</style> </style>
<script> <script>
@ -28,7 +38,7 @@
export default { export default {
data: () => ({ data: () => ({
promise: importTimeline(), promise: importTimeline(),
trueValue: true loading: true
}), }),
components: { components: {
LoadingSpinner LoadingSpinner

View file

@ -18,8 +18,8 @@
<span class="status-author-handle"> <span class="status-author-handle">
@{{originalAccount.acct}} @{{originalAccount.acct}}
</span> </span>
<a class="status-author-date" rel="noopener" target="_blank" href="{{originalAccount.url}}"> <a class="status-author-date" rel="noopener" target="_blank" href="{{originalStatus.uri}}">
<time datetime={{createdAtDate}} title="{{accessibleDate}}">{{relativeDate}}</time> <time datetime={{createdAtDate}} title="{{relativeDate}}">{{relativeDate}}</time>
</a> </a>
</div> </div>
<Avatar account={{originalAccount}} className="status-sidebar"/> <Avatar account={{originalAccount}} className="status-sidebar"/>
@ -214,23 +214,15 @@
}, },
computed: { computed: {
createdAtDate: (status) => status.created_at, createdAtDate: (status) => status.created_at,
accessibleDate: (createdAtDate) => {
return Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: 'numeric'
}).format(new Date(createdAtDate))
},
relativeDate: (createdAtDate) => { relativeDate: (createdAtDate) => {
mark('compute relativeDate') mark('compute relativeDate')
let res = relativeFormat.format(new Date(createdAtDate)) let res = relativeFormat.format(new Date(createdAtDate))
stop('compute relativeDate') stop('compute relativeDate')
return res return res
}, },
originalAccount: (status) => status.reblog ? status.reblog.account : status.account, originalStatus: (status) => status.reblog ? status.reblog : status,
originalMedia: (status) => status.reblog ? status.reblog.media_attachments : status.media_attachments, originalAccount: (originalStatus) => originalStatus.account,
originalMedia: (originalStatus) => originalStatus.media_attachments,
minMediaWidth: (originalMedia) => Math.min.apply(Math, originalMedia.map(_ => _.meta.small.width)) minMediaWidth: (originalMedia) => Math.min.apply(Math, originalMedia.map(_ => _.meta.small.width))
} }
} }

View file

@ -1,12 +1,12 @@
<:Window bind:online /> <:Window bind:online />
<div class="timeline" role="feed" aria-label="{{label}}" > <div class="timeline" role="feed" aria-label="{{label}}" on:initialized >
<VirtualList component="{{StatusListItem}}" <VirtualList component="{{StatusListItem}}"
items="{{keyedStatuses}}" items="{{keyedStatuses}}"
on:scrollToBottom="onScrollToBottom()" /> on:scrollToBottom="onScrollToBottom()" />
</div> </div>
<style> <style>
.timeline { .timeline {
min-height: 50vh; min-height: 60vh;
} }
</style> </style>
<script> <script>
@ -39,6 +39,7 @@
} }
this.addStatuses(statuses) this.addStatuses(statuses)
this.set({initialized: true}) this.set({initialized: true})
this.fire('initialized')
}, },
data: () => ({ data: () => ({
StatusListItem: StatusListItem, StatusListItem: StatusListItem,

View file

@ -4,7 +4,7 @@ import { toast } from './toast'
const OFFLINE_DELAY = 1000 const OFFLINE_DELAY = 1000
const notifyOffline = debounce(() => { const notifyOffline = debounce(() => {
toast.say('You appear to be offline. You can still read toots while offline.') toast.say('You seem to be offline. You can still read toots while offline.')
}, OFFLINE_DELAY) }, OFFLINE_DELAY)
const observe = online => { const observe = online => {