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

View File

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

View File

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

View File

@ -4,7 +4,7 @@ import { toast } from './toast'
const OFFLINE_DELAY = 1000
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)
const observe = online => {