improve loading spinner
This commit is contained in:
parent
e7f94de70c
commit
0360672d49
|
@ -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>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#await promise}}
|
||||
{{then constructor}}
|
||||
<:Component {constructor} :timeline />
|
||||
<:Component {constructor} :timeline on:initialized="set({'loading': false})"/>
|
||||
{{catch error}}
|
||||
<div>Component failed to load. Please try refreshing! {{error}}</div>
|
||||
{{/await}}
|
||||
</div>
|
||||
<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
|
||||
|
|
|
@ -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))
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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 => {
|
||||
|
|
Loading…
Reference in a new issue