diff options
| author | syuilo <4439005+syuilo@users.noreply.github.com> | 2025-03-29 17:15:31 +0900 |
|---|---|---|
| committer | syuilo <4439005+syuilo@users.noreply.github.com> | 2025-03-29 17:15:31 +0900 |
| commit | b030e33856904d6fcd257433eb610b0bfad688d3 (patch) | |
| tree | 1af1f6ff6a4a86bb91b426956d32245648874749 /packages | |
| parent | fix tests (diff) | |
| download | misskey-b030e33856904d6fcd257433eb610b0bfad688d3.tar.gz misskey-b030e33856904d6fcd257433eb610b0bfad688d3.tar.bz2 misskey-b030e33856904d6fcd257433eb610b0bfad688d3.zip | |
perf(frontend): improve performance of timeline page
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/frontend/src/pages/timeline.vue | 52 |
1 files changed, 28 insertions, 24 deletions
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue index 7fdeacc96b..e08fce7bc1 100644 --- a/packages/frontend/src/pages/timeline.vue +++ b/packages/frontend/src/pages/timeline.vue @@ -4,33 +4,37 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<PageWithHeader ref="rootEl" v-model:tab="src" :actions="headerActions" :tabs="$i ? headerTabs : headerTabsWhenNotLogin" :displayMyAvatar="true"> - <MkSpacer :contentMax="800"> - <MkInfo v-if="isBasicTimeline(src) && !store.r.timelineTutorials.value[src]" style="margin-bottom: var(--MI-margin);" closable @close="closeTutorial()"> - {{ i18n.ts._timelineDescription[src] }} - </MkInfo> - <MkPostForm v-if="prefer.r.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--MI-margin);"/> - <div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div> - <div :class="$style.tl"> - <MkTimeline - ref="tlComponent" - :key="src + withRenotes + withReplies + onlyFiles + withSensitive" - :src="src.split(':')[0]" - :list="src.split(':')[1]" - :withRenotes="withRenotes" - :withReplies="withReplies" - :withSensitive="withSensitive" - :onlyFiles="onlyFiles" - :sound="true" - @queue="queueUpdated" - /> - </div> - </MkSpacer> -</PageWithHeader> +<div ref="rootEl" class="_pageScrollable"> + <MkStickyContainer> + <template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="$i ? headerTabs : headerTabsWhenNotLogin"/></template> + <MkSpacer :contentMax="800"> + <MkInfo v-if="isBasicTimeline(src) && !store.r.timelineTutorials.value[src]" style="margin-bottom: var(--MI-margin);" closable @close="closeTutorial()"> + {{ i18n.ts._timelineDescription[src] }} + </MkInfo> + <MkPostForm v-if="prefer.r.showFixedPostForm.value" :class="$style.postForm" class="_panel" fixed style="margin-bottom: var(--MI-margin);"/> + <div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div> + <div :class="$style.tl"> + <MkTimeline + ref="tlComponent" + :key="src + withRenotes + withReplies + onlyFiles + withSensitive" + :src="src.split(':')[0]" + :list="src.split(':')[1]" + :withRenotes="withRenotes" + :withReplies="withReplies" + :withSensitive="withSensitive" + :onlyFiles="onlyFiles" + :sound="true" + @queue="queueUpdated" + /> + </div> + </MkSpacer> + </MkStickyContainer> +</div> </template> <script lang="ts" setup> import { computed, watch, provide, useTemplateRef, ref, onMounted, onActivated } from 'vue'; +import { scrollInContainer } from '@@/js/scroll.js'; import type { Tab } from '@/components/global/MkPageHeader.tabs.vue'; import type { MenuItem } from '@/types/menu.js'; import type { BasicTimelineType } from '@/timelines.js'; @@ -128,7 +132,7 @@ function queueUpdated(q: number): void { } function top(): void { - if (rootEl.value) rootEl.value.scrollToTop(); + if (rootEl.value) scrollInContainer(rootEl.value, { top: 0, behavior: 'instant' }); } async function chooseList(ev: MouseEvent): Promise<void> { |