mirror of
https://github.com/cheeaun/phanpy.git
synced 2024-11-24 10:15:37 +03:00
Fix status jumping bug
This part is too complex. The thread can get very fancy and it's impossible to handle all use-cases without a lot of code. Solution is just fading all of them out while loading.
This commit is contained in:
parent
c16b7764f2
commit
8babc97877
2 changed files with 15 additions and 15 deletions
|
@ -273,6 +273,14 @@ a.mention span {
|
||||||
.timeline.contextual > li.thread .replies li:before {
|
.timeline.contextual > li.thread .replies li:before {
|
||||||
left: calc(50px + 16px + 16px);
|
left: calc(50px + 16px + 16px);
|
||||||
}
|
}
|
||||||
|
.timeline.contextual.loading > li:not(.hero) {
|
||||||
|
opacity: 0.2;
|
||||||
|
pointer-events: none;
|
||||||
|
background-image: none !important;
|
||||||
|
}
|
||||||
|
.timeline.contextual.loading > li:not(.hero):before {
|
||||||
|
content: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
.timeline-deck.compact .status {
|
.timeline-deck.compact .status {
|
||||||
max-height: max(25vh, 160px);
|
max-height: max(25vh, 160px);
|
||||||
|
|
|
@ -23,19 +23,7 @@ function StatusPage({ id }) {
|
||||||
|
|
||||||
useEffect(async () => {
|
useEffect(async () => {
|
||||||
const containsStatus = statuses.find((s) => s.id === id);
|
const containsStatus = statuses.find((s) => s.id === id);
|
||||||
const statusesWithSameAccountID = statuses.filter(
|
if (!containsStatus) {
|
||||||
(s) => s.accountID === containsStatus?.accountID,
|
|
||||||
);
|
|
||||||
if (statusesWithSameAccountID.length > 1) {
|
|
||||||
setStatuses(
|
|
||||||
statusesWithSameAccountID.map((s) => ({
|
|
||||||
...s,
|
|
||||||
thread: true,
|
|
||||||
descendant: undefined,
|
|
||||||
ancestor: undefined,
|
|
||||||
})),
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
setStatuses([{ id }]);
|
setStatuses([{ id }]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -200,7 +188,11 @@ function StatusPage({ id }) {
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<ul class="timeline flat contextual">
|
<ul
|
||||||
|
class={`timeline flat contextual ${
|
||||||
|
uiState === 'loading' ? 'loading' : ''
|
||||||
|
}`}
|
||||||
|
>
|
||||||
{statuses.slice(0, limit).map((status) => {
|
{statuses.slice(0, limit).map((status) => {
|
||||||
const {
|
const {
|
||||||
id: statusID,
|
id: statusID,
|
||||||
|
@ -216,7 +208,7 @@ function StatusPage({ id }) {
|
||||||
ref={isHero ? heroStatusRef : null}
|
ref={isHero ? heroStatusRef : null}
|
||||||
class={`${ancestor ? 'ancestor' : ''} ${
|
class={`${ancestor ? 'ancestor' : ''} ${
|
||||||
descendant ? 'descendant' : ''
|
descendant ? 'descendant' : ''
|
||||||
} ${thread ? 'thread' : ''}`}
|
} ${thread ? 'thread' : ''} ${isHero ? 'hero' : ''}`}
|
||||||
>
|
>
|
||||||
{isHero ? (
|
{isHero ? (
|
||||||
<Status statusID={statusID} withinContext size="l" />
|
<Status statusID={statusID} withinContext size="l" />
|
||||||
|
|
Loading…
Reference in a new issue