improve loading spinner
This commit is contained in:
parent
e7f94de70c
commit
0360672d49
|
@ -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>
|
||||||
<LoadingSpinner />
|
<div class="loading-page">
|
||||||
|
<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
|
||||||
|
|
|
@ -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))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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 => {
|
||||||
|
|
Loading…
Reference in a new issue