diff options
4 files changed, 38 insertions, 14 deletions
diff --git a/Timeline/ClientApp/src/timeline/Timeline.tsx b/Timeline/ClientApp/src/timeline/Timeline.tsx index acc3ba0a..a2c14815 100644 --- a/Timeline/ClientApp/src/timeline/Timeline.tsx +++ b/Timeline/ClientApp/src/timeline/Timeline.tsx @@ -18,13 +18,14 @@ export interface TimelineProps { className?: string;
posts: TimelinePostInfoEx[];
onDelete: TimelineDeleteCallback;
+ onLoad?: () => void;
}
const Timeline: React.FC<TimelineProps> = (props) => {
const user = useUser();
const avatarVersion = useAvatarVersion();
- const { posts, onDelete } = props;
+ const { posts, onDelete, onLoad } = props;
const [indexShowDeleteButton, setIndexShowDeleteButton] = React.useState<
number
@@ -83,6 +84,7 @@ const Timeline: React.FC<TimelineProps> = (props) => { }
onClick={onItemClick}
avatarVersion={av}
+ onLoad={onLoad}
/>
);
});
diff --git a/Timeline/ClientApp/src/timeline/TimelineItem.tsx b/Timeline/ClientApp/src/timeline/TimelineItem.tsx index 7d488826..b10e6aca 100644 --- a/Timeline/ClientApp/src/timeline/TimelineItem.tsx +++ b/Timeline/ClientApp/src/timeline/TimelineItem.tsx @@ -55,6 +55,7 @@ export interface TimelineItemProps { };
onClick?: () => void;
avatarVersion?: number;
+ onLoad?: () => void;
}
const TimelineItem: React.FC<TimelineItemProps> = (props) => {
@@ -62,7 +63,8 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => { const current = props.current === true;
- const { more } = props;
+ const { more, onLoad
+ } = props;
const avatarUrl = useAvatarUrlWithGivenVersion(
props.avatarVersion,
@@ -117,7 +119,7 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => { className="float-right float-sm-left mx-2"
to={'/users/' + props.post.author.username}
>
- <img src={avatarUrl} className="avatar rounded" />
+ <img onLoad={onLoad} src={avatarUrl} className="avatar rounded" />
</Link>
{(() => {
const { content } = props.post;
@@ -125,7 +127,11 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => { return content.text;
} else {
return (
- <img src={content.url} className="timeline-content-image" />
+ <img
+ onLoad={onLoad}
+ src={content.url}
+ className="timeline-content-image"
+ />
);
}
})()}
diff --git a/Timeline/ClientApp/src/timeline/TimelinePageTemplate.tsx b/Timeline/ClientApp/src/timeline/TimelinePageTemplate.tsx index 2cfb4341..f8721985 100644 --- a/Timeline/ClientApp/src/timeline/TimelinePageTemplate.tsx +++ b/Timeline/ClientApp/src/timeline/TimelinePageTemplate.tsx @@ -114,15 +114,6 @@ export default function TimelinePageTemplate< };
}, [name, service, user, t, props.dataVersion, props.notFoundI18nKey]);
- React.useEffect(() => {
- if (posts != null) {
- window.scrollTo(
- 0,
- document.body.scrollHeight || document.documentElement.scrollHeight
- );
- }
- }, [posts]);
-
const closeDialog = React.useCallback((): void => {
setDialog(null);
}, []);
diff --git a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx index 6d834832..cd9393c2 100644 --- a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx +++ b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx @@ -1,6 +1,7 @@ import React from 'react';
import { Spinner } from 'reactstrap';
import { useTranslation } from 'react-i18next';
+import { Subject } from 'rxjs';
import { getAlertHost } from '../common/alert-service';
@@ -67,6 +68,26 @@ export default function TimelinePageTemplateUI< }
}, []);
+ const onLoadSubject = React.useMemo(() => new Subject(), []);
+ const triggerLoadEvent = React.useCallback(() => {
+ onLoadSubject.next(null);
+ }, [onLoadSubject]);
+
+ React.useEffect(() => {
+ let jumpToBottom = true;
+ const timerTag = window.setTimeout(() => {
+ jumpToBottom = false;
+ }, 1000);
+ const subscription = onLoadSubject.subscribe(() => {
+ if (jumpToBottom)
+ window.scrollTo(0, document.body.getBoundingClientRect().height);
+ });
+ return () => {
+ clearTimeout(timerTag);
+ subscription.unsubscribe();
+ };
+ }, [onLoadSubject, timeline, props.posts]);
+
const [cardHeight, setCardHeight] = React.useState<number>(0);
const onCardHeightChange = React.useCallback((height: number) => {
@@ -104,7 +125,11 @@ export default function TimelinePageTemplateUI< );
} else {
timelineBody = (
- <Timeline posts={props.posts} onDelete={props.onDelete} />
+ <Timeline
+ posts={props.posts}
+ onDelete={props.onDelete}
+ onLoad={triggerLoadEvent}
+ />
);
if (props.onPost != null) {
timelineBody = (
|