Page MenuHomePhorge
Files F85649158

No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 3c7e330603..9a6d75c8af 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -31,6 +31,7 @@ const Timeline = {
embedded: Boolean,
inProfile: Boolean,
skipPinned: Boolean,
+ hideEmpty: Boolean,
},
data() {
return {
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 2dd66328de..984129bf45 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -4,6 +4,14 @@
backdrop-filter: none;
}
+ .timeline-placeholder {
+ background: var(--background);
+ display: flex;
+ place-items: center;
+ place-content: center;
+ padding: 5em;
+ }
+
.alert-badge {
font-size: 0.75em;
line-height: 1;
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 1435bba484..d5397546d3 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -94,6 +94,24 @@
collapsable
/>
</div>
+ <template v-if="!hideEmpty && count === 0">
+ <div
+ v-if="timeline.fetcher.loadingNewer || timeline.fetcher.loadingOlder"
+ class="timeline-placeholder"
+ >
+ <FAIcon
+ icon="circle-notch"
+ spin
+ size="4x"
+ />
+ </div>
+ <div
+ v-else
+ class="timeline-placeholder faint"
+ >
+ {{ $t('timeline.no_statuses') }}
+ </div>
+ </template>
</div>
<div v-if="!embedded || footerSlipgate" :class="classes.footer">
<teleport
@@ -101,19 +119,23 @@
:disabled="!embedded || !footerSlipgate"
>
<div
- v-if="count === 0"
+ v-if="timeline.fetcher.bottomedOut"
class="new-status-notification text-center faint"
>
- {{ $t('timeline.no_statuses') }}
+ {{ $t('timeline.no_more_statuses') }}
</div>
<div
- v-else-if="timeline.fetcher.bottomedOut"
- class="new-status-notification text-center faint"
+ v-else-if="timeline.fetcher.loadingOlder"
+ class="new-status-notification text-center"
>
- {{ $t('timeline.no_more_statuses') }}
+ <FAIcon
+ icon="circle-notch"
+ spin
+ size="lg"
+ />
</div>
<button
- v-else-if="!timeline.fetcher.loadingOlder"
+ v-else-if="timeline.minId !== ''"
class="button-unstyled -link"
@click.prevent="fetchOlderStatuses()"
>
@@ -121,16 +143,6 @@
{{ $t('timeline.load_older') }}
</div>
</button>
- <div
- v-else
- class="new-status-notification text-center"
- >
- <FAIcon
- icon="circle-notch"
- spin
- size="lg"
- />
- </div>
</teleport>
<!-- spacer to avoid having empty shrug -->
<span v-if="embedded && footerSlipgate" />
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 9a987cd092..43d91b8e56 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -30,6 +30,7 @@
:timeline-ref="{ name: 'userPinned', argument: userId }"
embedded
in-profile
+ hide-empty
/>
<Timeline
:timeline-ref="{ name: 'user', argument: userId }"
diff --git a/src/stores/fetchers/timeline_fetcher.js b/src/stores/fetchers/timeline_fetcher.js
index 5737befef7..90a5f845aa 100644
--- a/src/stores/fetchers/timeline_fetcher.js
+++ b/src/stores/fetchers/timeline_fetcher.js
@@ -52,9 +52,13 @@ const timelineFetcher = (timeline, argument, credentials) => {
const numStatusesBeforeFetch = timeline.statusIds.size
- if (bottomedOut.value) return
+ if (older && bottomedOut.value) return
return fetchTimeline(args)
.then(({ data: statuses, pagination, timestamp }) => {
+ // No statuses for timeline, ever.
+ if (timeline.order.length === 0 && statuses.length === 0) {
+ bottomedOut.value = true
+ }
if (!older && statuses.length >= 20 && numStatusesBeforeFetch > 0) {
useTimelinesStore().requireReload(timeline.name)
}

File Metadata

Mime Type
text/x-diff
Expires
Sat, Aug 29, 7:52 AM (1 d, 9 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1736876
Default Alt Text
(4 KB)

Event Timeline