From 304f7757d9181496d5aed2045a9ab3a9f0814569 Mon Sep 17 00:00:00 2001
From: Matthias Camenzind <matc.pub@protonmail.com>
Date: Thu, 11 Apr 2024 10:35:15 +0200
Subject: [PATCH 1/5] Enable @babel/plugin-proposal-decorators

Dependency already exists
---
 .babelrc      | 7 ++++++-
 tsconfig.json | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/.babelrc b/.babelrc
index fbfb0025d..0b2c69397 100644
--- a/.babelrc
+++ b/.babelrc
@@ -13,7 +13,12 @@
     ["@babel/typescript", { "isTSX": true, "allExtensions": true }]
   ],
   "plugins": [
-    "@babel/plugin-transform-runtime",
+    ["@babel/plugin-proposal-decorators", { "version": "legacy" }],
+    [
+      "@babel/plugin-transform-runtime",
+      // version defaults to 7.0.0 for which non-legacy decorators produce duplicate code
+      { "version": "^7.24.3" }
+    ],
     ["babel-plugin-inferno", { "imports": true }],
     ["@babel/plugin-transform-class-properties", { "loose": true }]
   ]
diff --git a/tsconfig.json b/tsconfig.json
index aa4f70de9..ed5755289 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,7 +16,7 @@
     "skipLibCheck": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,
-    "experimentalDecorators": true,
+    "experimentalDecorators": true, // false for non-legacy decorators
     "strictNullChecks": true,
     "noFallthroughCasesInSwitch": true,
     "paths": {

From abf725af29ce16bdff3abcb64ca71da991b0213b Mon Sep 17 00:00:00 2001
From: Matthias Camenzind <matc.pub@protonmail.com>
Date: Thu, 11 Apr 2024 10:35:18 +0200
Subject: [PATCH 2/5] Use tippy.js delegate addon, cleanup tippy instances from
 a mixin.

The delegate addon creates tippy instances from mouse and touch events
with a matching `event.target`. This is initially significantly cheaper
than creating all instances at once. The addon keeps all created tippy
instances alive until it is destroyed itself.

`tippyMixin` destroys the addon instance after every render, as long as
all instances are hidden. This drops some tippy instances that may have
to be recreated later (e.g when the mouse moves over the trigger again),
but is otherwise fairly cheap (creates one tippy instance).
---
 .eslintrc.json                                |  4 ++
 src/shared/components/app/app.tsx             | 12 +++-
 src/shared/components/app/navbar.tsx          |  2 +
 .../components/comment/comment-node.tsx       |  5 +-
 .../components/comment/comment-report.tsx     |  2 +
 .../common/content-actions/action-button.tsx  |  2 +
 .../content-action-dropdown.tsx               |  2 +
 src/shared/components/common/emoji-picker.tsx |  2 +
 .../components/common/markdown-textarea.tsx   | 12 ++--
 src/shared/components/common/moment-time.tsx  |  2 +
 .../components/common/password-input.tsx      |  2 +
 src/shared/components/common/user-badges.tsx  |  4 +-
 src/shared/components/common/vote-buttons.tsx | 13 +++-
 .../components/community/community-form.tsx   |  2 +
 src/shared/components/community/community.tsx |  7 +--
 src/shared/components/community/sidebar.tsx   |  2 +
 src/shared/components/home/emojis-form.tsx    |  2 +
 src/shared/components/home/home.tsx           |  7 +--
 src/shared/components/home/site-sidebar.tsx   |  2 +
 src/shared/components/home/tagline-form.tsx   |  2 +
 src/shared/components/mixins/tippy-mixin.ts   | 25 ++++++++
 src/shared/components/person/cake-day.tsx     |  2 +
 .../components/person/person-details.tsx      |  5 --
 src/shared/components/person/profile.tsx      |  2 -
 .../person/registration-applications.tsx      |  2 -
 src/shared/components/person/settings.tsx     |  4 +-
 src/shared/components/post/post-form.tsx      |  2 -
 src/shared/components/post/post-listing.tsx   |  5 +-
 src/shared/components/post/post-report.tsx    |  2 +
 src/shared/components/post/post.tsx           |  3 -
 .../private_message/private-message-form.tsx  |  5 --
 .../private-message-report.tsx                |  2 +
 .../private_message/private-message.tsx       |  2 +
 src/shared/tippy.ts                           | 62 +++++++++++++++----
 34 files changed, 150 insertions(+), 61 deletions(-)
 create mode 100644 src/shared/components/mixins/tippy-mixin.ts

diff --git a/.eslintrc.json b/.eslintrc.json
index 4d0e75628..651ba006b 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -21,6 +21,10 @@
     "@typescript-eslint/explicit-module-boundary-types": 0,
     "@typescript-eslint/no-empty-function": 0,
     "@typescript-eslint/no-non-null-assertion": 0,
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "argsIgnorePattern": "^_" }
+    ],
     "arrow-body-style": 0,
     "curly": 0,
     "eol-last": 0,
diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx
index 30f445f7f..1538b0450 100644
--- a/src/shared/components/app/app.tsx
+++ b/src/shared/components/app/app.tsx
@@ -13,15 +13,25 @@ import { Navbar } from "./navbar";
 import "./styles.scss";
 import { Theme } from "./theme";
 import AnonymousGuard from "../common/anonymous-guard";
+import { destroyTippy, setupTippy } from "../../tippy";
 
 export class App extends Component<any, any> {
   private isoData: IsoDataOptionalSite = setIsoData(this.context);
   private readonly mainContentRef: RefObject<HTMLElement>;
+  private readonly rootRef = createRef<HTMLDivElement>();
   constructor(props: any, context: any) {
     super(props, context);
     this.mainContentRef = createRef();
   }
 
+  componentDidMount(): void {
+    setupTippy(this.rootRef);
+  }
+
+  componentWillUnmount(): void {
+    destroyTippy();
+  }
+
   handleJumpToContent(event) {
     event.preventDefault();
     this.mainContentRef.current?.focus();
@@ -34,7 +44,7 @@ export class App extends Component<any, any> {
     return (
       <>
         <Provider i18next={I18NextService.i18n}>
-          <div id="app" className="lemmy-site">
+          <div id="app" className="lemmy-site" ref={this.rootRef}>
             <button
               type="button"
               className="btn skip-link bg-light position-absolute start-0 z-3"
diff --git a/src/shared/components/app/navbar.tsx b/src/shared/components/app/navbar.tsx
index 390cd718d..1cfb40f2e 100644
--- a/src/shared/components/app/navbar.tsx
+++ b/src/shared/components/app/navbar.tsx
@@ -15,6 +15,7 @@ import { toast } from "../../toast";
 import { Icon } from "../common/icon";
 import { PictrsImage } from "../common/pictrs-image";
 import { Subscription } from "rxjs";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface NavbarProps {
   siteRes?: GetSiteResponse;
@@ -42,6 +43,7 @@ function handleLogOut(i: Navbar) {
   handleCollapseClick(i);
 }
 
+@tippyMixin
 export class Navbar extends Component<NavbarProps, NavbarState> {
   collapseButtonRef = createRef<HTMLButtonElement>();
   mobileMenuRef = createRef<HTMLDivElement>();
diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index 6a0e29ab6..ce1e7e4ae 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -42,7 +42,7 @@ import {
 } from "../../interfaces";
 import { mdToHtml, mdToHtmlNoImages } from "../../markdown";
 import { I18NextService, UserService } from "../../services";
-import { setupTippy } from "../../tippy";
+import { tippyMixin } from "../mixins/tippy-mixin";
 import { Icon, Spinner } from "../common/icon";
 import { MomentTime } from "../common/moment-time";
 import { UserBadges } from "../common/user-badges";
@@ -117,6 +117,7 @@ function handleToggleViewSource(i: CommentNode) {
   }));
 }
 
+@tippyMixin
 export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
   state: CommentNodeState = {
     showReply: false,
@@ -607,12 +608,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
 
   handleCommentCollapse(i: CommentNode) {
     i.setState({ collapsed: !i.state.collapsed });
-    setupTippy();
   }
 
   handleShowAdvanced(i: CommentNode) {
     i.setState({ showAdvanced: !i.state.showAdvanced });
-    setupTippy();
   }
 
   async handleSaveComment() {
diff --git a/src/shared/components/comment/comment-report.tsx b/src/shared/components/comment/comment-report.tsx
index 115ad2e9c..f0f0ef85d 100644
--- a/src/shared/components/comment/comment-report.tsx
+++ b/src/shared/components/comment/comment-report.tsx
@@ -11,6 +11,7 @@ import { Icon, Spinner } from "../common/icon";
 import { PersonListing } from "../person/person-listing";
 import { CommentNode } from "./comment-node";
 import { EMPTY_REQUEST } from "../../services/HttpService";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface CommentReportProps {
   report: CommentReportView;
@@ -21,6 +22,7 @@ interface CommentReportState {
   loading: boolean;
 }
 
+@tippyMixin
 export class CommentReport extends Component<
   CommentReportProps,
   CommentReportState
diff --git a/src/shared/components/common/content-actions/action-button.tsx b/src/shared/components/common/content-actions/action-button.tsx
index ee665969f..a5ca70060 100644
--- a/src/shared/components/common/content-actions/action-button.tsx
+++ b/src/shared/components/common/content-actions/action-button.tsx
@@ -1,6 +1,7 @@
 import { Component, linkEvent } from "inferno";
 import { Icon, Spinner } from "../icon";
 import classNames from "classnames";
+import { tippyMixin } from "../../mixins/tippy-mixin";
 
 interface ActionButtonPropsBase {
   label: string;
@@ -34,6 +35,7 @@ async function handleClick(i: ActionButton) {
   i.setState({ loading: false });
 }
 
+@tippyMixin
 export default class ActionButton extends Component<
   ActionButtonProps,
   ActionButtonState
diff --git a/src/shared/components/common/content-actions/content-action-dropdown.tsx b/src/shared/components/common/content-actions/content-action-dropdown.tsx
index 70381fcd6..58693f121 100644
--- a/src/shared/components/common/content-actions/content-action-dropdown.tsx
+++ b/src/shared/components/common/content-actions/content-action-dropdown.tsx
@@ -20,6 +20,7 @@ import ViewVotesModal from "../view-votes-modal";
 import ModActionFormModal, { BanUpdateForm } from "../mod-action-form-modal";
 import { BanType, CommentNodeView, PurgeType } from "../../../interfaces";
 import { getApubName, hostname } from "@utils/helpers";
+import { tippyMixin } from "../../mixins/tippy-mixin";
 
 interface ContentActionDropdownPropsBase {
   onSave: () => Promise<void>;
@@ -76,6 +77,7 @@ type ContentActionDropdownState = {
   mounted: boolean;
 } & { [key in DialogType]: boolean };
 
+@tippyMixin
 export default class ContentActionDropdown extends Component<
   ContentActionDropdownProps,
   ContentActionDropdownState
diff --git a/src/shared/components/common/emoji-picker.tsx b/src/shared/components/common/emoji-picker.tsx
index 0d131be42..ab061071d 100644
--- a/src/shared/components/common/emoji-picker.tsx
+++ b/src/shared/components/common/emoji-picker.tsx
@@ -2,6 +2,7 @@ import { Component, linkEvent } from "inferno";
 import { I18NextService } from "../../services";
 import { EmojiMart } from "./emoji-mart";
 import { Icon } from "./icon";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface EmojiPickerProps {
   onEmojiClick?(val: any): any;
@@ -16,6 +17,7 @@ function closeEmojiMartOnEsc(i, event): void {
   event.key === "Escape" && i.setState({ showPicker: false });
 }
 
+@tippyMixin
 export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
   private emptyState: EmojiPickerState = {
     showPicker: false,
diff --git a/src/shared/components/common/markdown-textarea.tsx b/src/shared/components/common/markdown-textarea.tsx
index a35da2131..abc945c91 100644
--- a/src/shared/components/common/markdown-textarea.tsx
+++ b/src/shared/components/common/markdown-textarea.tsx
@@ -3,7 +3,7 @@ import { numToSI, randomStr } from "@utils/helpers";
 import autosize from "autosize";
 import classNames from "classnames";
 import { NoOptionI18nKeys } from "i18next";
-import { Component, linkEvent } from "inferno";
+import { Component, InfernoNode, linkEvent } from "inferno";
 import { Prompt } from "inferno-router";
 import { Language } from "lemmy-js-client";
 import {
@@ -15,7 +15,7 @@ import {
 } from "../../config";
 import { customEmojisLookup, mdToHtml, setupTribute } from "../../markdown";
 import { HttpService, I18NextService, UserService } from "../../services";
-import { setupTippy } from "../../tippy";
+import { tippyMixin } from "../mixins/tippy-mixin";
 import { pictrsDeleteToast, toast } from "../../toast";
 import { EmojiPicker } from "./emoji-picker";
 import { Icon, Spinner } from "./icon";
@@ -68,6 +68,7 @@ interface MarkdownTextAreaState {
   submitted: boolean;
 }
 
+@tippyMixin
 export class MarkdownTextArea extends Component<
   MarkdownTextAreaProps,
   MarkdownTextAreaState
@@ -111,13 +112,12 @@ export class MarkdownTextArea extends Component<
       if (this.props.focus) {
         textarea.focus();
       }
-
-      // TODO this is slow for some reason
-      setupTippy();
     }
   }
 
-  componentWillReceiveProps(nextProps: MarkdownTextAreaProps) {
+  componentWillReceiveProps(
+    nextProps: MarkdownTextAreaProps & { children?: InfernoNode },
+  ) {
     if (nextProps.finished) {
       this.setState({
         previewMode: false,
diff --git a/src/shared/components/common/moment-time.tsx b/src/shared/components/common/moment-time.tsx
index 3a9f69d26..a91b2a9d1 100644
--- a/src/shared/components/common/moment-time.tsx
+++ b/src/shared/components/common/moment-time.tsx
@@ -3,6 +3,7 @@ import { format, parseISO } from "date-fns";
 import { Component } from "inferno";
 import { I18NextService } from "../../services";
 import { Icon } from "./icon";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface MomentTimeProps {
   published: string;
@@ -16,6 +17,7 @@ function formatDate(input: string) {
   return format(parsed, "PPPPpppp");
 }
 
+@tippyMixin
 export class MomentTime extends Component<MomentTimeProps, any> {
   constructor(props: any, context: any) {
     super(props, context);
diff --git a/src/shared/components/common/password-input.tsx b/src/shared/components/common/password-input.tsx
index 2e3387833..518cacb67 100644
--- a/src/shared/components/common/password-input.tsx
+++ b/src/shared/components/common/password-input.tsx
@@ -5,6 +5,7 @@ import { Component, FormEventHandler, linkEvent } from "inferno";
 import { NavLink } from "inferno-router";
 import { I18NextService } from "../../services";
 import { Icon } from "./icon";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface PasswordInputProps {
   id: string;
@@ -55,6 +56,7 @@ function handleToggleShow(i: PasswordInput) {
   }));
 }
 
+@tippyMixin
 class PasswordInput extends Component<PasswordInputProps, PasswordInputState> {
   state: PasswordInputState = {
     show: false,
diff --git a/src/shared/components/common/user-badges.tsx b/src/shared/components/common/user-badges.tsx
index 74990ca48..e5af460e7 100644
--- a/src/shared/components/common/user-badges.tsx
+++ b/src/shared/components/common/user-badges.tsx
@@ -1,6 +1,7 @@
 import classNames from "classnames";
 import { Component } from "inferno";
 import { I18NextService } from "../../services";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface UserBadgesProps {
   isBanned?: boolean;
@@ -12,7 +13,7 @@ interface UserBadgesProps {
   classNames?: string;
 }
 
-export function getRoleLabelPill({
+function getRoleLabelPill({
   label,
   tooltip,
   classes,
@@ -34,6 +35,7 @@ export function getRoleLabelPill({
   );
 }
 
+@tippyMixin
 export class UserBadges extends Component<UserBadgesProps> {
   render() {
     return (
diff --git a/src/shared/components/common/vote-buttons.tsx b/src/shared/components/common/vote-buttons.tsx
index d67d2bcea..cd0450f23 100644
--- a/src/shared/components/common/vote-buttons.tsx
+++ b/src/shared/components/common/vote-buttons.tsx
@@ -1,7 +1,7 @@
 import { newVote, showScores } from "@utils/app";
 import { numToSI } from "@utils/helpers";
 import classNames from "classnames";
-import { Component, linkEvent } from "inferno";
+import { Component, InfernoNode, linkEvent } from "inferno";
 import {
   CommentAggregates,
   CreateCommentLike,
@@ -11,6 +11,7 @@ import {
 import { VoteContentType, VoteType } from "../../interfaces";
 import { I18NextService, UserService } from "../../services";
 import { Icon, Spinner } from "../common/icon";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface VoteButtonsProps {
   voteContentType: VoteContentType;
@@ -82,6 +83,7 @@ const handleDownvote = (i: VoteButtons) => {
   }
 };
 
+@tippyMixin
 export class VoteButtonsCompact extends Component<
   VoteButtonsProps,
   VoteButtonsState
@@ -95,7 +97,9 @@ export class VoteButtonsCompact extends Component<
     super(props, context);
   }
 
-  componentWillReceiveProps(nextProps: VoteButtonsProps) {
+  componentWillReceiveProps(
+    nextProps: VoteButtonsProps & { children?: InfernoNode },
+  ) {
     if (this.props !== nextProps) {
       this.setState({
         upvoteLoading: false,
@@ -166,6 +170,7 @@ export class VoteButtonsCompact extends Component<
   }
 }
 
+@tippyMixin
 export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
   state: VoteButtonsState = {
     upvoteLoading: false,
@@ -176,7 +181,9 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
     super(props, context);
   }
 
-  componentWillReceiveProps(nextProps: VoteButtonsProps) {
+  componentWillReceiveProps(
+    nextProps: VoteButtonsProps & { children?: InfernoNode },
+  ) {
     if (this.props !== nextProps) {
       this.setState({
         upvoteLoading: false,
diff --git a/src/shared/components/community/community-form.tsx b/src/shared/components/community/community-form.tsx
index 327a75b16..206fc8419 100644
--- a/src/shared/components/community/community-form.tsx
+++ b/src/shared/components/community/community-form.tsx
@@ -13,6 +13,7 @@ import { Icon, Spinner } from "../common/icon";
 import { ImageUploadForm } from "../common/image-upload-form";
 import { LanguageSelect } from "../common/language-select";
 import { MarkdownTextArea } from "../common/markdown-textarea";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface CommunityFormProps {
   community_view?: CommunityView; // If a community is given, that means this is an edit
@@ -40,6 +41,7 @@ interface CommunityFormState {
   submitted: boolean;
 }
 
+@tippyMixin
 export class CommunityForm extends Component<
   CommunityFormProps,
   CommunityFormState
diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx
index 8f9c87648..2d96c5fc1 100644
--- a/src/shared/components/community/community.tsx
+++ b/src/shared/components/community/community.tsx
@@ -87,7 +87,7 @@ import {
   RequestState,
   wrapClient,
 } from "../../services/HttpService";
-import { setupTippy } from "../../tippy";
+import { tippyMixin } from "../mixins/tippy-mixin";
 import { toast } from "../../toast";
 import { CommentNodes } from "../comment/comment-nodes";
 import { BannerIconHeader } from "../common/banner-icon-header";
@@ -172,6 +172,7 @@ export type CommunityFetchConfig = IRoutePropsWithFetch<
   CommunityProps
 >;
 
+@tippyMixin
 export class Community extends Component<CommunityRouteProps, State> {
   private isoData = setIsoData<CommunityData>(this.context);
   state: State = {
@@ -253,8 +254,6 @@ export class Community extends Component<CommunityRouteProps, State> {
     if (!this.state.isIsomorphic) {
       await Promise.all([this.fetchCommunity(), this.fetchData()]);
     }
-
-    setupTippy();
   }
 
   static async fetchInitialData({
@@ -649,8 +648,6 @@ export class Community extends Component<CommunityRouteProps, State> {
         }),
       });
     }
-
-    setupTippy();
   }
 
   async handleDeleteCommunity(form: DeleteCommunity) {
diff --git a/src/shared/components/community/sidebar.tsx b/src/shared/components/community/sidebar.tsx
index 79c4b6b91..f3239b370 100644
--- a/src/shared/components/community/sidebar.tsx
+++ b/src/shared/components/community/sidebar.tsx
@@ -25,6 +25,7 @@ import { SubscribeButton } from "../common/subscribe-button";
 import { CommunityForm } from "../community/community-form";
 import { CommunityLink } from "../community/community-link";
 import { PersonListing } from "../person/person-listing";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface SidebarProps {
   community_view: CommunityView;
@@ -60,6 +61,7 @@ interface SidebarState {
   purgeCommunityLoading: boolean;
 }
 
+@tippyMixin
 export class Sidebar extends Component<SidebarProps, SidebarState> {
   state: SidebarState = {
     showEdit: false,
diff --git a/src/shared/components/home/emojis-form.tsx b/src/shared/components/home/emojis-form.tsx
index 9f158a2b0..f3d984124 100644
--- a/src/shared/components/home/emojis-form.tsx
+++ b/src/shared/components/home/emojis-form.tsx
@@ -13,6 +13,7 @@ import { pictrsDeleteToast, toast } from "../../toast";
 import { EmojiMart } from "../common/emoji-mart";
 import { Icon, Spinner } from "../common/icon";
 import { Paginator } from "../common/paginator";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface EmojiFormProps {
   onEdit(form: EditCustomEmoji): void;
@@ -38,6 +39,7 @@ interface CustomEmojiViewForm {
   loading: boolean;
 }
 
+@tippyMixin
 export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
   private isoData = setIsoData(this.context);
   private itemsPerPage = 15;
diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 56309da29..d6fb50a13 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -87,7 +87,7 @@ import {
   RequestState,
   wrapClient,
 } from "../../services/HttpService";
-import { setupTippy } from "../../tippy";
+import { tippyMixin } from "../mixins/tippy-mixin";
 import { toast } from "../../toast";
 import { CommentNodes } from "../comment/comment-nodes";
 import { DataTypeSelect } from "../common/data-type-select";
@@ -253,6 +253,7 @@ export type HomeFetchConfig = IRoutePropsWithFetch<
   HomeProps
 >;
 
+@tippyMixin
 export class Home extends Component<HomeRouteProps, HomeState> {
   private isoData = setIsoData<HomeData>(this.context);
   state: HomeState = {
@@ -334,8 +335,6 @@ export class Home extends Component<HomeRouteProps, HomeState> {
     ) {
       await Promise.all([this.fetchTrendingCommunities(), this.fetchData()]);
     }
-
-    setupTippy();
   }
 
   static async fetchInitialData({
@@ -852,8 +851,6 @@ export class Home extends Component<HomeRouteProps, HomeState> {
         }),
       });
     }
-
-    setupTippy();
   }
 
   handleShowSubscribedMobile(i: Home) {
diff --git a/src/shared/components/home/site-sidebar.tsx b/src/shared/components/home/site-sidebar.tsx
index 7cb4bff2e..3ae43d0b5 100644
--- a/src/shared/components/home/site-sidebar.tsx
+++ b/src/shared/components/home/site-sidebar.tsx
@@ -7,6 +7,7 @@ import { Badges } from "../common/badges";
 import { BannerIconHeader } from "../common/banner-icon-header";
 import { Icon } from "../common/icon";
 import { PersonListing } from "../person/person-listing";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface SiteSidebarProps {
   site: Site;
@@ -20,6 +21,7 @@ interface SiteSidebarState {
   collapsed: boolean;
 }
 
+@tippyMixin
 export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
   state: SiteSidebarState = {
     collapsed: false,
diff --git a/src/shared/components/home/tagline-form.tsx b/src/shared/components/home/tagline-form.tsx
index e46250281..ed93f466a 100644
--- a/src/shared/components/home/tagline-form.tsx
+++ b/src/shared/components/home/tagline-form.tsx
@@ -4,6 +4,7 @@ import { EditSite, Tagline } from "lemmy-js-client";
 import { I18NextService } from "../../services";
 import { Icon, Spinner } from "../common/icon";
 import { MarkdownTextArea } from "../common/markdown-textarea";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface TaglineFormProps {
   taglines: Array<Tagline>;
@@ -16,6 +17,7 @@ interface TaglineFormState {
   editingRow?: number;
 }
 
+@tippyMixin
 export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
   state: TaglineFormState = {
     editingRow: undefined,
diff --git a/src/shared/components/mixins/tippy-mixin.ts b/src/shared/components/mixins/tippy-mixin.ts
new file mode 100644
index 000000000..a7a55ed97
--- /dev/null
+++ b/src/shared/components/mixins/tippy-mixin.ts
@@ -0,0 +1,25 @@
+import { Component, InfernoNode } from "inferno";
+import { cleanupTippy } from "../../tippy";
+
+export function tippyMixin<
+  P,
+  S,
+  Base extends new (...args: any) => Component<P, S>,
+>(base: Base, _context?: ClassDecoratorContext<Base>) {
+  return class extends base {
+    componentDidUpdate(
+      prevProps: P & { children?: InfernoNode },
+      prevState: S,
+      snapshot: any,
+    ) {
+      // For conditional rendering, old tippy instances aren't reused
+      cleanupTippy();
+      return super.componentDidUpdate?.(prevProps, prevState, snapshot);
+    }
+
+    componentWillUnmount() {
+      cleanupTippy();
+      return super.componentWillUnmount?.();
+    }
+  };
+}
diff --git a/src/shared/components/person/cake-day.tsx b/src/shared/components/person/cake-day.tsx
index 3eeaf75ee..bef6e47fd 100644
--- a/src/shared/components/person/cake-day.tsx
+++ b/src/shared/components/person/cake-day.tsx
@@ -1,11 +1,13 @@
 import { Component } from "inferno";
 import { I18NextService } from "../../services";
 import { Icon } from "../common/icon";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface CakeDayProps {
   creatorName: string;
 }
 
+@tippyMixin
 export class CakeDay extends Component<CakeDayProps, any> {
   render() {
     return (
diff --git a/src/shared/components/person/person-details.tsx b/src/shared/components/person/person-details.tsx
index 7b0498a98..90ee16e72 100644
--- a/src/shared/components/person/person-details.tsx
+++ b/src/shared/components/person/person-details.tsx
@@ -41,7 +41,6 @@ import {
   TransferCommunity,
 } from "lemmy-js-client";
 import { CommentViewType, PersonDetailsView } from "../../interfaces";
-import { setupTippy } from "../../tippy";
 import { CommentNodes } from "../comment/comment-nodes";
 import { Paginator } from "../common/paginator";
 import { PostListing } from "../post/post-listing";
@@ -109,10 +108,6 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
     this.handlePageChange = this.handlePageChange.bind(this);
   }
 
-  componentDidMount() {
-    setupTippy();
-  }
-
   render() {
     return (
       <div className="person-details">
diff --git a/src/shared/components/person/profile.tsx b/src/shared/components/person/profile.tsx
index e74a324d3..7ec9bfbe3 100644
--- a/src/shared/components/person/profile.tsx
+++ b/src/shared/components/person/profile.tsx
@@ -82,7 +82,6 @@ import {
   RequestState,
   wrapClient,
 } from "../../services/HttpService";
-import { setupTippy } from "../../tippy";
 import { toast } from "../../toast";
 import { BannerIconHeader } from "../common/banner-icon-header";
 import { HtmlTags } from "../common/html-tags";
@@ -249,7 +248,6 @@ export class Profile extends Component<ProfileRouteProps, ProfileState> {
     if (!this.state.isIsomorphic) {
       await this.fetchUserData();
     }
-    setupTippy();
   }
 
   componentWillUnmount() {
diff --git a/src/shared/components/person/registration-applications.tsx b/src/shared/components/person/registration-applications.tsx
index 8b20c2b82..f9ea9f4c0 100644
--- a/src/shared/components/person/registration-applications.tsx
+++ b/src/shared/components/person/registration-applications.tsx
@@ -20,7 +20,6 @@ import {
   RequestState,
   wrapClient,
 } from "../../services/HttpService";
-import { setupTippy } from "../../tippy";
 import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
 import { Paginator } from "../common/paginator";
@@ -91,7 +90,6 @@ export class RegistrationApplications extends Component<
     if (!this.state.isIsomorphic) {
       await this.refetch();
     }
-    setupTippy();
   }
 
   get documentTitle(): string {
diff --git a/src/shared/components/person/settings.tsx b/src/shared/components/person/settings.tsx
index 0be954185..0fbc3d03f 100644
--- a/src/shared/components/person/settings.tsx
+++ b/src/shared/components/person/settings.tsx
@@ -49,7 +49,7 @@ import {
   languages,
   loadUserLanguage,
 } from "../../services/I18NextService";
-import { setupTippy } from "../../tippy";
+import { tippyMixin } from "../mixins/tippy-mixin";
 import { toast } from "../../toast";
 import { HtmlTags } from "../common/html-tags";
 import { Icon, Spinner } from "../common/icon";
@@ -203,6 +203,7 @@ export type SettingsFetchConfig = IRoutePropsWithFetch<
   Record<string, never>
 >;
 
+@tippyMixin
 export class Settings extends Component<SettingsRouteProps, SettingsState> {
   private isoData = setIsoData<SettingsData>(this.context);
   exportSettingsLink = createRef<HTMLAnchorElement>();
@@ -334,7 +335,6 @@ export class Settings extends Component<SettingsRouteProps, SettingsState> {
   }
 
   async componentDidMount() {
-    setupTippy();
     this.setState({ themeList: await fetchThemeList() });
 
     if (!this.state.isIsomorphic) {
diff --git a/src/shared/components/post/post-form.tsx b/src/shared/components/post/post-form.tsx
index 365fb2507..7b7c16d12 100644
--- a/src/shared/components/post/post-form.tsx
+++ b/src/shared/components/post/post-form.tsx
@@ -37,7 +37,6 @@ import {
   LOADING_REQUEST,
   RequestState,
 } from "../../services/HttpService";
-import { setupTippy } from "../../tippy";
 import { toast } from "../../toast";
 import { Icon, Spinner } from "../common/icon";
 import { LanguageSelect } from "../common/language-select";
@@ -306,7 +305,6 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
   }
 
   componentDidMount() {
-    setupTippy();
     const textarea: any = document.getElementById("post-title");
 
     if (textarea) {
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 8ac43abb1..6f95cd0c7 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -35,7 +35,7 @@ import { relTags } from "../../config";
 import { VoteContentType } from "../../interfaces";
 import { mdToHtml, mdToHtmlInline } from "../../markdown";
 import { I18NextService, UserService } from "../../services";
-import { setupTippy } from "../../tippy";
+import { tippyMixin } from "../mixins/tippy-mixin";
 import { Icon } from "../common/icon";
 import { MomentTime } from "../common/moment-time";
 import { PictrsImage } from "../common/pictrs-image";
@@ -93,6 +93,7 @@ interface PostListingProps {
   onMarkPostAsRead(form: MarkPostAsRead): void;
 }
 
+@tippyMixin
 export class PostListing extends Component<PostListingProps, PostListingState> {
   state: PostListingState = {
     showEdit: false,
@@ -982,7 +983,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   handleImageExpandClick(i: PostListing, event: any) {
     event.preventDefault();
     i.setState({ imageExpanded: !i.state.imageExpanded });
-    setupTippy();
 
     if (myAuth() && !i.postView.read) {
       i.props.onMarkPostAsRead({
@@ -998,7 +998,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
   handleShowBody(i: PostListing) {
     i.setState({ showBody: !i.state.showBody });
-    setupTippy();
   }
 
   get pointsTippy(): string {
diff --git a/src/shared/components/post/post-report.tsx b/src/shared/components/post/post-report.tsx
index f5f206b2b..4fba6f81a 100644
--- a/src/shared/components/post/post-report.tsx
+++ b/src/shared/components/post/post-report.tsx
@@ -6,6 +6,7 @@ import { Icon, Spinner } from "../common/icon";
 import { PersonListing } from "../person/person-listing";
 import { PostListing } from "./post-listing";
 import { EMPTY_REQUEST } from "../../services/HttpService";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface PostReportProps {
   report: PostReportView;
@@ -16,6 +17,7 @@ interface PostReportState {
   loading: boolean;
 }
 
+@tippyMixin
 export class PostReport extends Component<PostReportProps, PostReportState> {
   state: PostReportState = {
     loading: false,
diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx
index f75629433..3f65f2131 100644
--- a/src/shared/components/post/post.tsx
+++ b/src/shared/components/post/post.tsx
@@ -89,7 +89,6 @@ import {
   RequestState,
   wrapClient,
 } from "../../services/HttpService";
-import { setupTippy } from "../../tippy";
 import { toast } from "../../toast";
 import { CommentForm } from "../comment/comment-form";
 import { CommentNodes } from "../comment/comment-nodes";
@@ -237,8 +236,6 @@ export class Post extends Component<PostRouteProps, PostState> {
       commentsRes,
     });
 
-    setupTippy();
-
     if (!this.state.commentId) restoreScrollPosition(this.context);
 
     if (this.checkScrollIntoCommentsParam) {
diff --git a/src/shared/components/private_message/private-message-form.tsx b/src/shared/components/private_message/private-message-form.tsx
index 3298115aa..40a751142 100644
--- a/src/shared/components/private_message/private-message-form.tsx
+++ b/src/shared/components/private_message/private-message-form.tsx
@@ -10,7 +10,6 @@ import {
 } from "lemmy-js-client";
 import { relTags } from "../../config";
 import { I18NextService } from "../../services";
-import { setupTippy } from "../../tippy";
 import { Icon } from "../common/icon";
 import { MarkdownTextArea } from "../common/markdown-textarea";
 import { PersonListing } from "../person/person-listing";
@@ -50,10 +49,6 @@ export class PrivateMessageForm extends Component<
     this.handleContentChange = this.handleContentChange.bind(this);
   }
 
-  componentDidMount() {
-    setupTippy();
-  }
-
   componentWillReceiveProps(
     nextProps: Readonly<{ children?: InfernoNode } & PrivateMessageFormProps>,
   ): void {
diff --git a/src/shared/components/private_message/private-message-report.tsx b/src/shared/components/private_message/private-message-report.tsx
index 39e98c97c..22fa52eba 100644
--- a/src/shared/components/private_message/private-message-report.tsx
+++ b/src/shared/components/private_message/private-message-report.tsx
@@ -8,6 +8,7 @@ import { mdToHtml } from "../../markdown";
 import { I18NextService } from "../../services";
 import { Icon, Spinner } from "../common/icon";
 import { PersonListing } from "../person/person-listing";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface Props {
   report: PrivateMessageReportView;
@@ -18,6 +19,7 @@ interface State {
   loading: boolean;
 }
 
+@tippyMixin
 export class PrivateMessageReport extends Component<Props, State> {
   state: State = {
     loading: false,
diff --git a/src/shared/components/private_message/private-message.tsx b/src/shared/components/private_message/private-message.tsx
index dd59d0618..851b07543 100644
--- a/src/shared/components/private_message/private-message.tsx
+++ b/src/shared/components/private_message/private-message.tsx
@@ -15,6 +15,7 @@ import { MomentTime } from "../common/moment-time";
 import { PersonListing } from "../person/person-listing";
 import { PrivateMessageForm } from "./private-message-form";
 import ModActionFormModal from "../common/mod-action-form-modal";
+import { tippyMixin } from "../mixins/tippy-mixin";
 
 interface PrivateMessageState {
   showReply: boolean;
@@ -35,6 +36,7 @@ interface PrivateMessageProps {
   onEdit(form: EditPrivateMessage): void;
 }
 
+@tippyMixin
 export class PrivateMessage extends Component<
   PrivateMessageProps,
   PrivateMessageState
diff --git a/src/shared/tippy.ts b/src/shared/tippy.ts
index 6bb8760dc..b890b1a10 100644
--- a/src/shared/tippy.ts
+++ b/src/shared/tippy.ts
@@ -1,19 +1,55 @@
-import { isBrowser } from "@utils/browser";
-import tippy from "tippy.js";
+import { RefObject } from "inferno";
+import {
+  DelegateInstance as TippyDelegateInstance,
+  Props as TippyProps,
+  Instance as TippyInstance,
+  delegate as tippyDelegate,
+} from "tippy.js";
 
-export let tippyInstance: any;
+let instance: TippyDelegateInstance<TippyProps> | undefined;
+const tippySelector = "[data-tippy-content]";
+const shownInstances: Set<TippyInstance<TippyProps>> = new Set();
 
-if (isBrowser()) {
-  tippyInstance = tippy("[data-tippy-content]");
+const tippyDelegateOptions: Partial<TippyProps> & { target: string } = {
+  delay: [500, 0],
+  // Display on "long press"
+  touch: ["hold", 500],
+  target: tippySelector,
+  onShow(i: TippyInstance<TippyProps>) {
+    shownInstances.add(i);
+  },
+  onHidden(i: TippyInstance<TippyProps>) {
+    shownInstances.delete(i);
+  },
+};
+
+export function setupTippy(root: RefObject<Element>) {
+  if (!instance && root.current) {
+    instance = tippyDelegate(root.current, tippyDelegateOptions);
+  }
 }
 
-export function setupTippy() {
-  if (isBrowser()) {
-    tippyInstance.forEach((e: any) => e.destroy());
-    tippyInstance = tippy("[data-tippy-content]", {
-      delay: [500, 0],
-      // Display on "long press"
-      touch: ["hold", 500],
-    });
+let requested = false;
+export function cleanupTippy() {
+  if (requested) {
+    return;
   }
+  requested = true;
+  queueMicrotask(() => {
+    requested = false;
+    if (shownInstances.size) {
+      // Avoid randomly closing tooltips.
+      return;
+    }
+    // delegate from tippy.js creates tippy instances when needed, but only
+    // destroys them when the delegate instance is destroyed.
+    const current = instance?.reference ?? null;
+    destroyTippy();
+    setupTippy({ current });
+  });
+}
+
+export function destroyTippy() {
+  instance?.destroy();
+  instance = undefined;
 }

From 3c26dfd857c6e8c5c0d9fd2c7529827d4477bb1a Mon Sep 17 00:00:00 2001
From: Matthias Camenzind <matc.pub@protonmail.com>
Date: Thu, 11 Apr 2024 10:35:20 +0200
Subject: [PATCH 3/5] Restore scroll positions when resource loading settles.

The history module generates a random string (`location.key`) for every
browser history entry. The names for saved positions include this key.
The position is saved before a route component unmounts or before the
`location.key` changes.

The `scrollMixin` tires to restore the scroll position after every
change of `location.key`. It only does so after the first render for
which the route components `loadingSettled()` returns true.

Things like `scrollToComments` should only scroll when `history.action`
is not "POP".
---
 src/client/index.tsx                          |   2 +
 .../components/community/communities.tsx      |   7 +
 src/shared/components/community/community.tsx |  18 ++-
 .../components/community/create-community.tsx |   8 +-
 src/shared/components/home/admin-settings.tsx |   8 +-
 src/shared/components/home/home.tsx           |  12 ++
 src/shared/components/home/instances.tsx      |   7 +
 src/shared/components/home/login-reset.tsx    |   8 +-
 src/shared/components/home/login.tsx          |   2 +
 src/shared/components/home/setup.tsx          |   8 +-
 src/shared/components/home/signup.tsx         |  17 +-
 src/shared/components/mixins/scroll-mixin.ts  | 145 ++++++++++++++++++
 src/shared/components/modlog.tsx              |   7 +
 src/shared/components/person/inbox.tsx        |  16 +-
 .../components/person/password-change.tsx     |   8 +-
 src/shared/components/person/profile.tsx      |  13 +-
 .../person/registration-applications.tsx      |   8 +-
 src/shared/components/person/reports.tsx      |  12 +-
 src/shared/components/person/settings.tsx     |   2 +
 src/shared/components/person/verify-email.tsx |   8 +-
 src/shared/components/post/create-post.tsx    |   2 +
 src/shared/components/post/post.tsx           |  34 ++--
 .../create-private-message.tsx                |   7 +
 src/shared/components/remote-fetch.tsx        |   8 +-
 src/shared/components/search.tsx              |  17 +-
 src/shared/utils/browser/index.ts             |   8 +-
 src/shared/utils/browser/next-user-action.ts  |  46 ++++++
 .../utils/browser/restore-scroll-position.ts  |   6 -
 .../utils/browser/save-scroll-position.ts     |   6 -
 src/shared/utils/browser/snap-to-top.ts       |   3 +
 src/shared/utils/helpers/index.ts             |   2 +
 src/shared/utils/helpers/resources-settled.ts |   5 +
 32 files changed, 400 insertions(+), 60 deletions(-)
 create mode 100644 src/shared/components/mixins/scroll-mixin.ts
 create mode 100644 src/shared/utils/browser/next-user-action.ts
 delete mode 100644 src/shared/utils/browser/restore-scroll-position.ts
 delete mode 100644 src/shared/utils/browser/save-scroll-position.ts
 create mode 100644 src/shared/utils/browser/snap-to-top.ts
 create mode 100644 src/shared/utils/helpers/resources-settled.ts

diff --git a/src/client/index.tsx b/src/client/index.tsx
index f2518e8f1..db0a9ef76 100644
--- a/src/client/index.tsx
+++ b/src/client/index.tsx
@@ -16,6 +16,8 @@ async function startClient() {
     verifyDynamicImports(true).then(x => console.log(x));
   };
 
+  window.history.scrollRestoration = "manual";
+
   initializeSite(window.isoData.site_res);
 
   lazyHighlightjs.enableLazyLoading();
diff --git a/src/shared/components/community/communities.tsx b/src/shared/components/community/communities.tsx
index 82474f302..c05f223d9 100644
--- a/src/shared/components/community/communities.tsx
+++ b/src/shared/components/community/communities.tsx
@@ -4,6 +4,7 @@ import {
   getQueryParams,
   getQueryString,
   numToSI,
+  resourcesSettled,
 } from "@utils/helpers";
 import type { QueryParams } from "@utils/types";
 import { RouteDataResponse } from "@utils/types";
@@ -38,6 +39,7 @@ import { SubscribeButton } from "../common/subscribe-button";
 import { getHttpBaseInternal } from "../../utils/env";
 import { RouteComponentProps } from "inferno-router/dist/Route";
 import { IRoutePropsWithFetch } from "../../routes";
+import { scrollMixin } from "../mixins/scroll-mixin";
 
 type CommunitiesData = RouteDataResponse<{
   listCommunitiesResponse: ListCommunitiesResponse;
@@ -84,6 +86,7 @@ export type CommunitiesFetchConfig = IRoutePropsWithFetch<
   CommunitiesProps
 >;
 
+@scrollMixin
 export class Communities extends Component<
   CommunitiesRouteProps,
   CommunitiesState
@@ -96,6 +99,10 @@ export class Communities extends Component<
     isIsomorphic: false,
   };
 
+  loadingSettled() {
+    return resourcesSettled([this.state.listCommunitiesResponse]);
+  }
+
   constructor(props: CommunitiesRouteProps, context: any) {
     super(props, context);
     this.handlePageChange = this.handlePageChange.bind(this);
diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx
index 2d96c5fc1..234642a85 100644
--- a/src/shared/components/community/community.tsx
+++ b/src/shared/components/community/community.tsx
@@ -14,7 +14,12 @@ import {
   updateCommunityBlock,
   updatePersonBlock,
 } from "@utils/app";
-import { getQueryParams, getQueryString } from "@utils/helpers";
+import {
+  getQueryParams,
+  getQueryString,
+  resourcesSettled,
+} from "@utils/helpers";
+import { scrollMixin } from "../mixins/scroll-mixin";
 import type { QueryParams } from "@utils/types";
 import { RouteDataResponse } from "@utils/types";
 import { Component, RefObject, createRef, linkEvent } from "inferno";
@@ -172,6 +177,7 @@ export type CommunityFetchConfig = IRoutePropsWithFetch<
   CommunityProps
 >;
 
+@scrollMixin
 @tippyMixin
 export class Community extends Component<CommunityRouteProps, State> {
   private isoData = setIsoData<CommunityData>(this.context);
@@ -185,6 +191,16 @@ export class Community extends Component<CommunityRouteProps, State> {
     isIsomorphic: false,
   };
   private readonly mainContentRef: RefObject<HTMLElement>;
+
+  loadingSettled() {
+    return resourcesSettled([
+      this.state.communityRes,
+      this.props.dataType === DataType.Post
+        ? this.state.postsRes
+        : this.state.commentsRes,
+    ]);
+  }
+
   constructor(props: CommunityRouteProps, context: any) {
     super(props, context);
 
diff --git a/src/shared/components/community/create-community.tsx b/src/shared/components/community/create-community.tsx
index a1a9a97a9..cf9345cb5 100644
--- a/src/shared/components/community/create-community.tsx
+++ b/src/shared/components/community/create-community.tsx
@@ -7,13 +7,19 @@ import {
 import { HttpService, I18NextService } from "../../services";
 import { HtmlTags } from "../common/html-tags";
 import { CommunityForm } from "./community-form";
+import { simpleScrollMixin } from "../mixins/scroll-mixin";
+import { RouteComponentProps } from "inferno-router/dist/Route";
 
 interface CreateCommunityState {
   siteRes: GetSiteResponse;
   loading: boolean;
 }
 
-export class CreateCommunity extends Component<any, CreateCommunityState> {
+@simpleScrollMixin
+export class CreateCommunity extends Component<
+  RouteComponentProps<Record<string, never>>,
+  CreateCommunityState
+> {
   private isoData = setIsoData(this.context);
   state: CreateCommunityState = {
     siteRes: this.isoData.site_res,
diff --git a/src/shared/components/home/admin-settings.tsx b/src/shared/components/home/admin-settings.tsx
index 7e42acd0e..4f5d141dd 100644
--- a/src/shared/components/home/admin-settings.tsx
+++ b/src/shared/components/home/admin-settings.tsx
@@ -1,5 +1,6 @@
 import { fetchThemeList, setIsoData, showLocal } from "@utils/app";
-import { capitalizeFirstLetter } from "@utils/helpers";
+import { capitalizeFirstLetter, resourcesSettled } from "@utils/helpers";
+import { scrollMixin } from "../mixins/scroll-mixin";
 import { RouteDataResponse } from "@utils/types";
 import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
@@ -62,6 +63,7 @@ export type AdminSettingsFetchConfig = IRoutePropsWithFetch<
   Record<string, never>
 >;
 
+@scrollMixin
 export class AdminSettings extends Component<
   AdminSettingsRouteProps,
   AdminSettingsState
@@ -79,6 +81,10 @@ export class AdminSettings extends Component<
     isIsomorphic: false,
   };
 
+  loadingSettled() {
+    return resourcesSettled([this.state.bannedRes, this.state.instancesRes]);
+  }
+
   constructor(props: any, context: any) {
     super(props, context);
 
diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index d6fb50a13..3c73874af 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -17,7 +17,9 @@ import {
   getQueryParams,
   getQueryString,
   getRandomFromList,
+  resourcesSettled,
 } from "@utils/helpers";
+import { scrollMixin } from "../mixins/scroll-mixin";
 import { canCreateCommunity } from "@utils/roles";
 import type { QueryParams } from "@utils/types";
 import { RouteDataResponse } from "@utils/types";
@@ -253,6 +255,7 @@ export type HomeFetchConfig = IRoutePropsWithFetch<
   HomeProps
 >;
 
+@scrollMixin
 @tippyMixin
 export class Home extends Component<HomeRouteProps, HomeState> {
   private isoData = setIsoData<HomeData>(this.context);
@@ -270,6 +273,15 @@ export class Home extends Component<HomeRouteProps, HomeState> {
     isIsomorphic: false,
   };
 
+  loadingSettled(): boolean {
+    return resourcesSettled([
+      this.state.trendingCommunitiesRes,
+      this.props.dataType === DataType.Post
+        ? this.state.postsRes
+        : this.state.commentsRes,
+    ]);
+  }
+
   constructor(props: any, context: any) {
     super(props, context);
 
diff --git a/src/shared/components/home/instances.tsx b/src/shared/components/home/instances.tsx
index 81d213d62..8dd4e7f80 100644
--- a/src/shared/components/home/instances.tsx
+++ b/src/shared/components/home/instances.tsx
@@ -24,6 +24,8 @@ import Tabs from "../common/tabs";
 import { getHttpBaseInternal } from "../../utils/env";
 import { RouteComponentProps } from "inferno-router/dist/Route";
 import { IRoutePropsWithFetch } from "../../routes";
+import { resourcesSettled } from "@utils/helpers";
+import { scrollMixin } from "../mixins/scroll-mixin";
 
 type InstancesData = RouteDataResponse<{
   federatedInstancesResponse: GetFederatedInstancesResponse;
@@ -43,6 +45,7 @@ export type InstancesFetchConfig = IRoutePropsWithFetch<
   Record<string, never>
 >;
 
+@scrollMixin
 export class Instances extends Component<InstancesRouteProps, InstancesState> {
   private isoData = setIsoData<InstancesData>(this.context);
   state: InstancesState = {
@@ -51,6 +54,10 @@ export class Instances extends Component<InstancesRouteProps, InstancesState> {
     isIsomorphic: false,
   };
 
+  loadingSettled() {
+    return resourcesSettled([this.state.instancesRes]);
+  }
+
   constructor(props: any, context: any) {
     super(props, context);
 
diff --git a/src/shared/components/home/login-reset.tsx b/src/shared/components/home/login-reset.tsx
index 131011ae5..cd499cb88 100644
--- a/src/shared/components/home/login-reset.tsx
+++ b/src/shared/components/home/login-reset.tsx
@@ -6,6 +6,8 @@ import { HttpService, I18NextService } from "../../services";
 import { toast } from "../../toast";
 import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
+import { simpleScrollMixin } from "../mixins/scroll-mixin";
+import { RouteComponentProps } from "inferno-router/dist/Route";
 
 interface State {
   form: {
@@ -15,7 +17,11 @@ interface State {
   siteRes: GetSiteResponse;
 }
 
-export class LoginReset extends Component<any, State> {
+@simpleScrollMixin
+export class LoginReset extends Component<
+  RouteComponentProps<Record<string, never>>,
+  State
+> {
   private isoData = setIsoData(this.context);
 
   state: State = {
diff --git a/src/shared/components/home/login.tsx b/src/shared/components/home/login.tsx
index c8705fed5..4a7723d87 100644
--- a/src/shared/components/home/login.tsx
+++ b/src/shared/components/home/login.tsx
@@ -19,6 +19,7 @@ import TotpModal from "../common/totp-modal";
 import { UnreadCounterService } from "../../services";
 import { RouteData } from "../../interfaces";
 import { IRoutePropsWithFetch } from "../../routes";
+import { simpleScrollMixin } from "../mixins/scroll-mixin";
 
 interface LoginProps {
   prev?: string;
@@ -125,6 +126,7 @@ export type LoginFetchConfig = IRoutePropsWithFetch<
   LoginProps
 >;
 
+@simpleScrollMixin
 export class Login extends Component<LoginRouteProps, State> {
   private isoData = setIsoData(this.context);
 
diff --git a/src/shared/components/home/setup.tsx b/src/shared/components/home/setup.tsx
index 5dbad944b..6775f548c 100644
--- a/src/shared/components/home/setup.tsx
+++ b/src/shared/components/home/setup.tsx
@@ -17,6 +17,8 @@ import {
 import { Spinner } from "../common/icon";
 import PasswordInput from "../common/password-input";
 import { SiteForm } from "./site-form";
+import { simpleScrollMixin } from "../mixins/scroll-mixin";
+import { RouteComponentProps } from "inferno-router/dist/Route";
 
 interface State {
   form: {
@@ -36,7 +38,11 @@ interface State {
   siteRes: GetSiteResponse;
 }
 
-export class Setup extends Component<any, State> {
+@simpleScrollMixin
+export class Setup extends Component<
+  RouteComponentProps<Record<string, never>>,
+  State
+> {
   private isoData = setIsoData(this.context);
 
   state: State = {
diff --git a/src/shared/components/home/signup.tsx b/src/shared/components/home/signup.tsx
index 1714872dd..b0398ef97 100644
--- a/src/shared/components/home/signup.tsx
+++ b/src/shared/components/home/signup.tsx
@@ -1,6 +1,7 @@
 import { setIsoData } from "@utils/app";
 import { isBrowser } from "@utils/browser";
-import { validEmail } from "@utils/helpers";
+import { resourcesSettled, validEmail } from "@utils/helpers";
+import { scrollMixin } from "../mixins/scroll-mixin";
 import { Component, linkEvent } from "inferno";
 import { T } from "inferno-i18next-dess";
 import {
@@ -24,6 +25,7 @@ import { HtmlTags } from "../common/html-tags";
 import { Icon, Spinner } from "../common/icon";
 import { MarkdownTextArea } from "../common/markdown-textarea";
 import PasswordInput from "../common/password-input";
+import { RouteComponentProps } from "inferno-router/dist/Route";
 
 interface State {
   registerRes: RequestState<LoginResponse>;
@@ -43,7 +45,11 @@ interface State {
   siteRes: GetSiteResponse;
 }
 
-export class Signup extends Component<any, State> {
+@scrollMixin
+export class Signup extends Component<
+  RouteComponentProps<Record<string, never>>,
+  State
+> {
   private isoData = setIsoData(this.context);
   private audio?: HTMLAudioElement;
 
@@ -57,6 +63,13 @@ export class Signup extends Component<any, State> {
     siteRes: this.isoData.site_res,
   };
 
+  loadingSettled() {
+    return (
+      !this.state.siteRes.site_view.local_site.captcha_enabled ||
+      resourcesSettled([this.state.captchaRes])
+    );
+  }
+
   constructor(props: any, context: any) {
     super(props, context);
 
diff --git a/src/shared/components/mixins/scroll-mixin.ts b/src/shared/components/mixins/scroll-mixin.ts
new file mode 100644
index 000000000..e327f3f39
--- /dev/null
+++ b/src/shared/components/mixins/scroll-mixin.ts
@@ -0,0 +1,145 @@
+import { isBrowser, nextUserAction, snapToTop } from "../../utils/browser";
+import { Component, InfernoNode } from "inferno";
+import { Location } from "history";
+
+function restoreScrollPosition(props: { location: Location }) {
+  const key: string = props.location.key;
+  const y = sessionStorage.getItem(`scrollPosition_${key}`);
+
+  if (y !== null) {
+    window.scrollTo({ left: 0, top: Number(y), behavior: "instant" });
+  }
+}
+
+function saveScrollPosition(props: { location: Location }) {
+  const key: string = props.location.key;
+
+  const y = window.scrollY;
+
+  sessionStorage.setItem(`scrollPosition_${key}`, y.toString());
+}
+
+function dropScrollPosition(props: { location: Location }) {
+  const key: string = props.location.key;
+  sessionStorage.removeItem(`scrollPosition_${key}`);
+}
+
+export function scrollMixin<
+  P extends { location: Location },
+  S,
+  Base extends new (
+    ...args: any
+  ) => Component<P, S> & { loadingSettled(): boolean },
+>(base: Base, _context?: ClassDecoratorContext<Base>) {
+  return class extends base {
+    private stopUserListener: (() => void) | undefined;
+    private blocked?: string;
+
+    constructor(...args: any[]) {
+      super(...args);
+
+      if (!isBrowser()) {
+        return;
+      }
+
+      this.reset();
+    }
+
+    componentDidMount() {
+      this.restoreIfLoaded();
+      return super.componentDidMount?.();
+    }
+
+    componentDidUpdate(
+      prevProps: Readonly<{ children?: InfernoNode } & P>,
+      prevState: S,
+      snapshot: any,
+    ) {
+      this.restoreIfLoaded();
+      return super.componentDidUpdate?.(prevProps, prevState, snapshot);
+    }
+
+    componentWillUnmount() {
+      this.saveFinalPosition();
+      return super.componentWillUnmount?.();
+    }
+
+    componentWillReceiveProps(
+      nextProps: Readonly<{ children?: InfernoNode } & P>,
+      nextContext: any,
+    ) {
+      // Currently this is hypothetical. Components unmount before route changes.
+      if (this.props.location.key !== nextProps.location.key) {
+        this.saveFinalPosition();
+        this.reset();
+      }
+      return super.componentWillReceiveProps?.(nextProps, nextContext);
+    }
+
+    unloadListeners = () => {
+      // Browsers restore the position after reload, but not after pressing
+      // Enter in the url bar. It's hard to distinguish the two, let the
+      // browser do its thing.
+      window.history.scrollRestoration = "auto";
+      dropScrollPosition(this.props);
+    };
+
+    reset() {
+      this.blocked = undefined;
+      this.stopUserListener?.();
+      // While inferno is rendering no events are dispatched. This only catches
+      // user interactions when network responses are slow/late.
+      this.stopUserListener = nextUserAction(() => {
+        this.preventRestore();
+      });
+      window.removeEventListener("beforeunload", this.unloadListeners);
+      window.addEventListener("beforeunload", this.unloadListeners);
+    }
+
+    savePosition() {
+      saveScrollPosition(this.props);
+    }
+
+    saveFinalPosition() {
+      this.savePosition();
+      snapToTop();
+      window.removeEventListener("beforeunload", this.unloadListeners);
+    }
+
+    preventRestore() {
+      this.blocked = this.props.location.key;
+      this.stopUserListener?.();
+      this.stopUserListener = undefined;
+    }
+
+    restore() {
+      restoreScrollPosition(this.props);
+      this.preventRestore();
+    }
+
+    restoreIfLoaded() {
+      if (!this.isPending() || !this.loadingSettled()) {
+        return;
+      }
+      this.restore();
+    }
+
+    isPending() {
+      return this.blocked !== this.props.location.key;
+    }
+  };
+}
+
+export function simpleScrollMixin<
+  P extends { location: Location },
+  S,
+  Base extends new (...args: any) => Component<P, S>,
+>(base: Base, _context?: ClassDecoratorContext<Base>) {
+  @scrollMixin
+  class SimpleScrollMixin extends base {
+    loadingSettled() {
+      return true;
+    }
+  }
+  return SimpleScrollMixin;
+}
diff --git a/src/shared/components/modlog.tsx b/src/shared/components/modlog.tsx
index fdd90f302..b04bcb79d 100644
--- a/src/shared/components/modlog.tsx
+++ b/src/shared/components/modlog.tsx
@@ -11,7 +11,9 @@ import {
   getPageFromString,
   getQueryParams,
   getQueryString,
+  resourcesSettled,
 } from "@utils/helpers";
+import { scrollMixin } from "./mixins/scroll-mixin";
 import { amAdmin, amMod } from "@utils/roles";
 import type { QueryParams } from "@utils/types";
 import { Choice, RouteDataResponse } from "@utils/types";
@@ -645,6 +647,7 @@ export type ModlogFetchConfig = IRoutePropsWithFetch<
   ModlogProps
 >;
 
+@scrollMixin
 export class Modlog extends Component<ModlogRouteProps, ModlogState> {
   private isoData = setIsoData<ModlogData>(this.context);
 
@@ -658,6 +661,10 @@ export class Modlog extends Component<ModlogRouteProps, ModlogState> {
     isIsomorphic: false,
   };
 
+  loadingSettled() {
+    return resourcesSettled([this.state.res]);
+  }
+
   constructor(props: ModlogRouteProps, context: any) {
     super(props, context);
     this.handlePageChange = this.handlePageChange.bind(this);
diff --git a/src/shared/components/person/inbox.tsx b/src/shared/components/person/inbox.tsx
index 239e33407..53ba54bf0 100644
--- a/src/shared/components/person/inbox.tsx
+++ b/src/shared/components/person/inbox.tsx
@@ -10,7 +10,12 @@ import {
   setIsoData,
   updatePersonBlock,
 } from "@utils/app";
-import { capitalizeFirstLetter, randomStr } from "@utils/helpers";
+import {
+  capitalizeFirstLetter,
+  randomStr,
+  resourcesSettled,
+} from "@utils/helpers";
+import { scrollMixin } from "../mixins/scroll-mixin";
 import { RouteDataResponse } from "@utils/types";
 import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
@@ -137,6 +142,7 @@ export type InboxFetchConfig = IRoutePropsWithFetch<
   Record<string, never>
 >;
 
+@scrollMixin
 export class Inbox extends Component<InboxRouteProps, InboxState> {
   private isoData = setIsoData<InboxData>(this.context);
   state: InboxState = {
@@ -153,6 +159,14 @@ export class Inbox extends Component<InboxRouteProps, InboxState> {
     isIsomorphic: false,
   };
 
+  loadingSettled() {
+    return resourcesSettled([
+      this.state.repliesRes,
+      this.state.mentionsRes,
+      this.state.messagesRes,
+    ]);
+  }
+
   constructor(props: any, context: any) {
     super(props, context);
 
diff --git a/src/shared/components/person/password-change.tsx b/src/shared/components/person/password-change.tsx
index 2d3d3df2e..c0d2a4072 100644
--- a/src/shared/components/person/password-change.tsx
+++ b/src/shared/components/person/password-change.tsx
@@ -12,6 +12,8 @@ import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
 import PasswordInput from "../common/password-input";
 import { toast } from "../../toast";
+import { simpleScrollMixin } from "../mixins/scroll-mixin";
+import { RouteComponentProps } from "inferno-router/dist/Route";
 
 interface State {
   passwordChangeRes: RequestState<SuccessResponse>;
@@ -23,7 +25,11 @@ interface State {
   siteRes: GetSiteResponse;
 }
 
-export class PasswordChange extends Component<any, State> {
+@simpleScrollMixin
+export class PasswordChange extends Component<
+  RouteComponentProps<Record<string, never>>,
+  State
+> {
   private isoData = setIsoData(this.context);
 
   state: State = {
diff --git a/src/shared/components/person/profile.tsx b/src/shared/components/person/profile.tsx
index 7ec9bfbe3..bb5607438 100644
--- a/src/shared/components/person/profile.tsx
+++ b/src/shared/components/person/profile.tsx
@@ -8,7 +8,7 @@ import {
   setIsoData,
   updatePersonBlock,
 } from "@utils/app";
-import { restoreScrollPosition, saveScrollPosition } from "@utils/browser";
+import { scrollMixin } from "../mixins/scroll-mixin";
 import {
   capitalizeFirstLetter,
   futureDaysToUnixTime,
@@ -17,6 +17,7 @@ import {
   getQueryString,
   numToSI,
   randomStr,
+  resourcesSettled,
 } from "@utils/helpers";
 import { canMod, isBanned } from "@utils/roles";
 import type { QueryParams } from "@utils/types";
@@ -182,6 +183,7 @@ export type ProfileFetchConfig = IRoutePropsWithFetch<
   ProfileProps
 >;
 
+@scrollMixin
 export class Profile extends Component<ProfileRouteProps, ProfileState> {
   private isoData = setIsoData<ProfileData>(this.context);
   state: ProfileState = {
@@ -194,6 +196,10 @@ export class Profile extends Component<ProfileRouteProps, ProfileState> {
     isIsomorphic: false,
   };
 
+  loadingSettled() {
+    return resourcesSettled([this.state.personRes]);
+  }
+
   constructor(props: ProfileRouteProps, context: any) {
     super(props, context);
 
@@ -250,10 +256,6 @@ export class Profile extends Component<ProfileRouteProps, ProfileState> {
     }
   }
 
-  componentWillUnmount() {
-    saveScrollPosition(this.context);
-  }
-
   async fetchUserData() {
     const { page, sort, view } = this.props;
 
@@ -269,7 +271,6 @@ export class Profile extends Component<ProfileRouteProps, ProfileState> {
       personRes,
       personBlocked: isPersonBlocked(personRes),
     });
-    restoreScrollPosition(this.context);
   }
 
   get amCurrentUser() {
diff --git a/src/shared/components/person/registration-applications.tsx b/src/shared/components/person/registration-applications.tsx
index f9ea9f4c0..d738f1ce5 100644
--- a/src/shared/components/person/registration-applications.tsx
+++ b/src/shared/components/person/registration-applications.tsx
@@ -1,5 +1,6 @@
 import { editRegistrationApplication, setIsoData } from "@utils/app";
-import { randomStr } from "@utils/helpers";
+import { randomStr, resourcesSettled } from "@utils/helpers";
+import { scrollMixin } from "../mixins/scroll-mixin";
 import { RouteDataResponse } from "@utils/types";
 import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
@@ -57,6 +58,7 @@ export type RegistrationApplicationsFetchConfig = IRoutePropsWithFetch<
   Record<string, never>
 >;
 
+@scrollMixin
 export class RegistrationApplications extends Component<
   RegistrationApplicationsRouteProps,
   RegistrationApplicationsState
@@ -70,6 +72,10 @@ export class RegistrationApplications extends Component<
     isIsomorphic: false,
   };
 
+  loadingSettled() {
+    return resourcesSettled([this.state.appsRes]);
+  }
+
   constructor(props: any, context: any) {
     super(props, context);
 
diff --git a/src/shared/components/person/reports.tsx b/src/shared/components/person/reports.tsx
index fd6e4bab5..742922a5d 100644
--- a/src/shared/components/person/reports.tsx
+++ b/src/shared/components/person/reports.tsx
@@ -4,7 +4,8 @@ import {
   editPrivateMessageReport,
   setIsoData,
 } from "@utils/app";
-import { randomStr } from "@utils/helpers";
+import { randomStr, resourcesSettled } from "@utils/helpers";
+import { scrollMixin } from "../mixins/scroll-mixin";
 import { amAdmin } from "@utils/roles";
 import { RouteDataResponse } from "@utils/types";
 import classNames from "classnames";
@@ -103,6 +104,7 @@ export type ReportsFetchConfig = IRoutePropsWithFetch<
   Record<string, never>
 >;
 
+@scrollMixin
 export class Reports extends Component<ReportsRouteProps, ReportsState> {
   private isoData = setIsoData<ReportsData>(this.context);
   state: ReportsState = {
@@ -116,6 +118,14 @@ export class Reports extends Component<ReportsRouteProps, ReportsState> {
     isIsomorphic: false,
   };
 
+  loadingSettled() {
+    return resourcesSettled([
+      this.state.commentReportsRes,
+      this.state.postReportsRes,
+      this.state.messageReportsRes,
+    ]);
+  }
+
   constructor(props: any, context: any) {
     super(props, context);
 
diff --git a/src/shared/components/person/settings.tsx b/src/shared/components/person/settings.tsx
index 0fbc3d03f..6a922c3fc 100644
--- a/src/shared/components/person/settings.tsx
+++ b/src/shared/components/person/settings.tsx
@@ -70,6 +70,7 @@ import { refreshTheme, setThemeOverride } from "../../utils/browser";
 import { getHttpBaseInternal } from "../../utils/env";
 import { IRoutePropsWithFetch } from "../../routes";
 import { RouteComponentProps } from "inferno-router/dist/Route";
+import { simpleScrollMixin } from "../mixins/scroll-mixin";
 
 type SettingsData = RouteDataResponse<{
   instancesRes: GetFederatedInstancesResponse;
@@ -203,6 +204,7 @@ export type SettingsFetchConfig = IRoutePropsWithFetch<
   Record<string, never>
 >;
 
+@simpleScrollMixin
 @tippyMixin
 export class Settings extends Component<SettingsRouteProps, SettingsState> {
   private isoData = setIsoData<SettingsData>(this.context);
diff --git a/src/shared/components/person/verify-email.tsx b/src/shared/components/person/verify-email.tsx
index e8f116c48..73a5c99dd 100644
--- a/src/shared/components/person/verify-email.tsx
+++ b/src/shared/components/person/verify-email.tsx
@@ -11,13 +11,19 @@ import {
 import { toast } from "../../toast";
 import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
+import { simpleScrollMixin } from "../mixins/scroll-mixin";
+import { RouteComponentProps } from "inferno-router/dist/Route";
 
 interface State {
   verifyRes: RequestState<SuccessResponse>;
   siteRes: GetSiteResponse;
 }
 
-export class VerifyEmail extends Component<any, State> {
+@simpleScrollMixin
+export class VerifyEmail extends Component<
+  RouteComponentProps<Record<string, never>>,
+  State
+> {
   private isoData = setIsoData(this.context);
 
   state: State = {
diff --git a/src/shared/components/post/create-post.tsx b/src/shared/components/post/create-post.tsx
index 8adf50809..5e3673bb9 100644
--- a/src/shared/components/post/create-post.tsx
+++ b/src/shared/components/post/create-post.tsx
@@ -30,6 +30,7 @@ import { Spinner } from "../common/icon";
 import { PostForm } from "./post-form";
 import { getHttpBaseInternal } from "../../utils/env";
 import { IRoutePropsWithFetch } from "../../routes";
+import { simpleScrollMixin } from "../mixins/scroll-mixin";
 
 export interface CreatePostProps {
   communityId?: number;
@@ -70,6 +71,7 @@ export type CreatePostFetchConfig = IRoutePropsWithFetch<
   CreatePostProps
 >;
 
+@simpleScrollMixin
 export class CreatePost extends Component<
   CreatePostRouteProps,
   CreatePostState
diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx
index 3f65f2131..d5127db55 100644
--- a/src/shared/components/post/post.tsx
+++ b/src/shared/components/post/post.tsx
@@ -13,12 +13,14 @@ import {
   updateCommunityBlock,
   updatePersonBlock,
 } from "@utils/app";
+import { isBrowser } from "@utils/browser";
 import {
-  isBrowser,
-  restoreScrollPosition,
-  saveScrollPosition,
-} from "@utils/browser";
-import { debounce, getApubName, randomStr } from "@utils/helpers";
+  debounce,
+  getApubName,
+  randomStr,
+  resourcesSettled,
+} from "@utils/helpers";
+import { scrollMixin } from "../mixins/scroll-mixin";
 import { isImage } from "@utils/media";
 import { RouteDataResponse } from "@utils/types";
 import autosize from "autosize";
@@ -134,6 +136,7 @@ export type PostFetchConfig = IRoutePropsWithFetch<
   Record<string, never>
 >;
 
+@scrollMixin
 export class Post extends Component<PostRouteProps, PostState> {
   private isoData = setIsoData<PostData>(this.context);
   private commentScrollDebounced: () => void;
@@ -152,6 +155,10 @@ export class Post extends Component<PostRouteProps, PostState> {
     isIsomorphic: false,
   };
 
+  loadingSettled() {
+    return resourcesSettled([this.state.postRes, this.state.commentsRes]);
+  }
+
   constructor(props: any, context: any) {
     super(props, context);
 
@@ -236,8 +243,6 @@ export class Post extends Component<PostRouteProps, PostState> {
       commentsRes,
     });
 
-    if (!this.state.commentId) restoreScrollPosition(this.context);
-
     if (this.checkScrollIntoCommentsParam) {
       this.scrollIntoCommentSection();
     }
@@ -281,8 +286,6 @@ export class Post extends Component<PostRouteProps, PostState> {
 
   componentWillUnmount() {
     document.removeEventListener("scroll", this.commentScrollDebounced);
-
-    saveScrollPosition(this.context);
   }
 
   async componentDidMount() {
@@ -296,16 +299,11 @@ export class Post extends Component<PostRouteProps, PostState> {
     document.addEventListener("scroll", this.commentScrollDebounced);
   }
 
-  async componentDidUpdate(_lastProps: any) {
-    // Necessary if you are on a post and you click another post (same route)
-    if (_lastProps.location.pathname !== _lastProps.history.location.pathname) {
-      await this.fetchPost();
-    }
-  }
-
   get checkScrollIntoCommentsParam() {
-    return Boolean(
-      new URLSearchParams(this.props.location.search).get("scrollToComments"),
+    return (
+      Boolean(
+        new URLSearchParams(this.props.location.search).get("scrollToComments"),
+      ) && this.props.history.action !== "POP"
     );
   }
 
diff --git a/src/shared/components/private_message/create-private-message.tsx b/src/shared/components/private_message/create-private-message.tsx
index ea8d5e3a6..f50a012af 100644
--- a/src/shared/components/private_message/create-private-message.tsx
+++ b/src/shared/components/private_message/create-private-message.tsx
@@ -24,6 +24,8 @@ import { PrivateMessageForm } from "./private-message-form";
 import { getHttpBaseInternal } from "../../utils/env";
 import { RouteComponentProps } from "inferno-router/dist/Route";
 import { IRoutePropsWithFetch } from "../../routes";
+import { resourcesSettled } from "@utils/helpers";
+import { scrollMixin } from "../mixins/scroll-mixin";
 
 type CreatePrivateMessageData = RouteDataResponse<{
   recipientDetailsResponse: GetPersonDetailsResponse;
@@ -45,6 +47,7 @@ export type CreatePrivateMessageFetchConfig = IRoutePropsWithFetch<
   Record<string, never>
 >;
 
+@scrollMixin
 export class CreatePrivateMessage extends Component<
   CreatePrivateMessageRouteProps,
   CreatePrivateMessageState
@@ -57,6 +60,10 @@ export class CreatePrivateMessage extends Component<
     isIsomorphic: false,
   };
 
+  loadingSettled() {
+    return resourcesSettled([this.state.recipientRes]);
+  }
+
   constructor(props: any, context: any) {
     super(props, context);
     this.handlePrivateMessageCreate =
diff --git a/src/shared/components/remote-fetch.tsx b/src/shared/components/remote-fetch.tsx
index f4b6699f7..3627ae8e1 100644
--- a/src/shared/components/remote-fetch.tsx
+++ b/src/shared/components/remote-fetch.tsx
@@ -1,5 +1,6 @@
 import { setIsoData } from "@utils/app";
-import { getQueryParams } from "@utils/helpers";
+import { getQueryParams, resourcesSettled } from "@utils/helpers";
+import { scrollMixin } from "./mixins/scroll-mixin";
 import { RouteDataResponse } from "@utils/types";
 import { Component, linkEvent } from "inferno";
 import {
@@ -97,6 +98,7 @@ export type RemoteFetchFetchConfig = IRoutePropsWithFetch<
   RemoteFetchProps
 >;
 
+@scrollMixin
 export class RemoteFetch extends Component<
   RemoteFetchRouteProps,
   RemoteFetchState
@@ -108,6 +110,10 @@ export class RemoteFetch extends Component<
     followCommunityLoading: false,
   };
 
+  loadingSettled() {
+    return resourcesSettled([this.state.resolveObjectRes]);
+  }
+
   constructor(props: RemoteFetchRouteProps, context: any) {
     super(props, context);
 
diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index c1e85ff5a..dc595558c 100644
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -11,7 +11,7 @@ import {
   setIsoData,
   showLocal,
 } from "@utils/app";
-import { restoreScrollPosition, saveScrollPosition } from "@utils/browser";
+import { scrollMixin } from "./mixins/scroll-mixin";
 import {
   capitalizeFirstLetter,
   debounce,
@@ -21,6 +21,7 @@ import {
   getQueryParams,
   getQueryString,
   numToSI,
+  resourcesSettled,
 } from "@utils/helpers";
 import type { QueryParams } from "@utils/types";
 import { Choice, RouteDataResponse } from "@utils/types";
@@ -253,6 +254,7 @@ export type SearchFetchConfig = IRoutePropsWithFetch<
   SearchProps
 >;
 
+@scrollMixin
 export class Search extends Component<SearchRouteProps, SearchState> {
   private isoData = setIsoData<SearchData>(this.context);
   searchInput = createRef<HTMLInputElement>();
@@ -268,6 +270,10 @@ export class Search extends Component<SearchRouteProps, SearchState> {
     isIsomorphic: false,
   };
 
+  loadingSettled() {
+    return resourcesSettled([this.state.searchRes]);
+  }
+
   constructor(props: SearchRouteProps, context: any) {
     super(props, context);
 
@@ -323,7 +329,9 @@ export class Search extends Component<SearchRouteProps, SearchState> {
   }
 
   async componentDidMount() {
-    this.searchInput.current?.select();
+    if (this.props.history.action !== "POP") {
+      this.searchInput.current?.select();
+    }
 
     if (!this.state.isIsomorphic) {
       this.setState({
@@ -397,10 +405,6 @@ export class Search extends Component<SearchRouteProps, SearchState> {
     }
   }
 
-  componentWillUnmount() {
-    saveScrollPosition(this.context);
-  }
-
   static async fetchInitialData({
     headers,
     query: {
@@ -992,7 +996,6 @@ export class Search extends Component<SearchRouteProps, SearchState> {
         }),
       });
       window.scrollTo(0, 0);
-      restoreScrollPosition(this.context);
 
       if (myAuth()) {
         this.setState({ resolveObjectRes: LOADING_REQUEST });
diff --git a/src/shared/utils/browser/index.ts b/src/shared/utils/browser/index.ts
index 98c2bba85..6a6682bc4 100644
--- a/src/shared/utils/browser/index.ts
+++ b/src/shared/utils/browser/index.ts
@@ -3,13 +3,13 @@ import clearAuthCookie from "./clear-auth-cookie";
 import dataBsTheme from "./data-bs-theme";
 import isBrowser from "./is-browser";
 import isDark from "./is-dark";
+import nextUserAction from "./next-user-action";
 import platform from "./platform";
 import refreshTheme from "./refresh-theme";
-import restoreScrollPosition from "./restore-scroll-position";
-import saveScrollPosition from "./save-scroll-position";
 import setAuthCookie from "./set-auth-cookie";
 import setThemeOverride from "./set-theme-override";
 import share from "./share";
+import snapToTop from "./snap-to-top";
 
 export {
   canShare,
@@ -17,11 +17,11 @@ export {
   dataBsTheme,
   isBrowser,
   isDark,
+  nextUserAction,
   platform,
   refreshTheme,
-  restoreScrollPosition,
-  saveScrollPosition,
   setAuthCookie,
   setThemeOverride,
   share,
+  snapToTop,
 };
diff --git a/src/shared/utils/browser/next-user-action.ts b/src/shared/utils/browser/next-user-action.ts
new file mode 100644
index 000000000..40b0125e8
--- /dev/null
+++ b/src/shared/utils/browser/next-user-action.ts
@@ -0,0 +1,46 @@
+const eventTypes = ["mousedown", "keydown", "touchstart", "touchmove", "wheel"];
+
+const scrollThreshold = 2;
+
+type Continue = boolean | void;
+
+export default function nextUserAction(cb: (e: Event) => Continue) {
+  const eventTarget = window.document.body;
+
+  let cleanup: (() => void) | undefined = () => {
+    cleanup = undefined;
+    eventTypes.forEach(ev => {
+      eventTarget.removeEventListener(ev, listener);
+    });
+    window.removeEventListener("scroll", scrollListener);
+  };
+
+  const listener = (e: Event) => {
+    if (!cb(e)) {
+      cleanup?.();
+    }
+  };
+  eventTypes.forEach(ev => {
+    eventTarget.addEventListener(ev, listener);
+  });
+
+  let remaining = scrollThreshold;
+  const scrollListener = (e: Event) => {
+    // This only has to cover the scrollbars. The problem is that scroll events
+    // are also fired when the document height shrinks below the current bottom
+    // edge of the window.
+    remaining--;
+    if (remaining < 0) {
+      if (!cb(e)) {
+        cleanup?.();
+      } else {
+        remaining = scrollThreshold;
+      }
+    }
+  };
+  window.addEventListener("scroll", scrollListener);
+
+  return () => {
+    cleanup?.();
+  };
+}
diff --git a/src/shared/utils/browser/restore-scroll-position.ts b/src/shared/utils/browser/restore-scroll-position.ts
deleted file mode 100644
index 6986ae597..000000000
--- a/src/shared/utils/browser/restore-scroll-position.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export default function restoreScrollPosition(context: any) {
-  const path: string = context.router.route.location.pathname;
-  const y = Number(sessionStorage.getItem(`scrollPosition_${path}`));
-
-  window.scrollTo(0, y);
-}
diff --git a/src/shared/utils/browser/save-scroll-position.ts b/src/shared/utils/browser/save-scroll-position.ts
deleted file mode 100644
index 596d5d9f5..000000000
--- a/src/shared/utils/browser/save-scroll-position.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export default function saveScrollPosition(context: any) {
-  const path: string = context.router.route.location.pathname;
-  const y = window.scrollY;
-
-  sessionStorage.setItem(`scrollPosition_${path}`, y.toString());
-}
diff --git a/src/shared/utils/browser/snap-to-top.ts b/src/shared/utils/browser/snap-to-top.ts
new file mode 100644
index 000000000..ac4110100
--- /dev/null
+++ b/src/shared/utils/browser/snap-to-top.ts
@@ -0,0 +1,3 @@
+export default function snapToTop() {
+  window.scrollTo({ left: 0, top: 0, behavior: "instant" });
+}
diff --git a/src/shared/utils/helpers/index.ts b/src/shared/utils/helpers/index.ts
index 9f862c55f..58eec8ccf 100644
--- a/src/shared/utils/helpers/index.ts
+++ b/src/shared/utils/helpers/index.ts
@@ -17,6 +17,7 @@ import isCakeDay from "./is-cake-day";
 import numToSI from "./num-to-si";
 import poll from "./poll";
 import randomStr from "./random-str";
+import resourcesSettled from "./resources-settled";
 import sleep from "./sleep";
 import validEmail from "./valid-email";
 import validInstanceTLD from "./valid-instance-tld";
@@ -45,6 +46,7 @@ export {
   numToSI,
   poll,
   randomStr,
+  resourcesSettled,
   sleep,
   validEmail,
   validInstanceTLD,
diff --git a/src/shared/utils/helpers/resources-settled.ts b/src/shared/utils/helpers/resources-settled.ts
new file mode 100644
index 000000000..bbc8b68e7
--- /dev/null
+++ b/src/shared/utils/helpers/resources-settled.ts
@@ -0,0 +1,5 @@
+import { RequestState } from "../../services/HttpService";
+
+export default function resourcesSettled(resources: RequestState<any>[]) {
+  return resources.every(r => r.state === "success" || r.state === "failed");
+}

From c89c9d974961ebf8c05ed5a9a71d49f2963c1e4e Mon Sep 17 00:00:00 2001
From: Matthias Camenzind <matc.pub@protonmail.com>
Date: Thu, 11 Apr 2024 10:35:22 +0200
Subject: [PATCH 4/5] Drop individual scrollTo calls

---
 src/shared/components/community/communities.tsx |  2 --
 src/shared/components/community/community.tsx   |  3 ---
 src/shared/components/home/home.tsx             | 14 ++------------
 src/shared/components/person/settings.tsx       |  6 +++---
 src/shared/components/search.tsx                |  1 -
 5 files changed, 5 insertions(+), 21 deletions(-)

diff --git a/src/shared/components/community/communities.tsx b/src/shared/components/community/communities.tsx
index c05f223d9..ac2324fb5 100644
--- a/src/shared/components/community/communities.tsx
+++ b/src/shared/components/community/communities.tsx
@@ -381,8 +381,6 @@ export class Communities extends Component<
         page,
       }),
     });
-
-    window.scrollTo(0, 0);
   }
 
   findAndUpdateCommunity(res: RequestState<CommunityResponse>) {
diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx
index 234642a85..8ec272cbc 100644
--- a/src/shared/components/community/community.tsx
+++ b/src/shared/components/community/community.tsx
@@ -601,17 +601,14 @@ export class Community extends Component<CommunityRouteProps, State> {
 
   handlePageNext(nextPage: PaginationCursor) {
     this.updateUrl({ pageCursor: nextPage });
-    window.scrollTo(0, 0);
   }
 
   handleSortChange(sort: SortType) {
     this.updateUrl({ sort, pageCursor: undefined });
-    window.scrollTo(0, 0);
   }
 
   handleDataTypeChange(dataType: DataType) {
     this.updateUrl({ dataType, pageCursor: undefined });
-    window.scrollTo(0, 0);
   }
 
   handleShowSidebarMobile(i: Community) {
diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 3c73874af..9944a9697 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -109,6 +109,7 @@ import {
 } from "../common/loading-skeleton";
 import { RouteComponentProps } from "inferno-router/dist/Route";
 import { IRoutePropsWithFetch } from "../../routes";
+import { snapToTop } from "@utils/browser";
 
 interface HomeState {
   postsRes: RequestState<GetPostsResponse>;
@@ -118,7 +119,6 @@ interface HomeState {
   showTrendingMobile: boolean;
   showSidebarMobile: boolean;
   subscribedCollapsed: boolean;
-  scrolled: boolean;
   tagline?: string;
   siteRes: GetSiteResponse;
   finished: Map<CommentId, boolean | undefined>;
@@ -263,7 +263,6 @@ export class Home extends Component<HomeRouteProps, HomeState> {
     postsRes: EMPTY_REQUEST,
     commentsRes: EMPTY_REQUEST,
     trendingCommunitiesRes: EMPTY_REQUEST,
-    scrolled: true,
     siteRes: this.isoData.site_res,
     showSubscribedMobile: false,
     showTrendingMobile: false,
@@ -678,11 +677,6 @@ export class Home extends Component<HomeRouteProps, HomeState> {
       search: getQueryString(queryParams),
     });
 
-    if (!this.state.scrolled) {
-      this.setState({ scrolled: true });
-      setTimeout(() => window.scrollTo(0, 0), 0);
-    }
-
     await this.fetchData();
   }
 
@@ -885,27 +879,23 @@ export class Home extends Component<HomeRouteProps, HomeState> {
     this.props.history.back();
     // A hack to scroll to top
     setTimeout(() => {
-      window.scrollTo(0, 0);
+      snapToTop();
     }, 50);
   }
 
   handlePageNext(nextPage: PaginationCursor) {
-    this.setState({ scrolled: false });
     this.updateUrl({ pageCursor: nextPage });
   }
 
   handleSortChange(val: SortType) {
-    this.setState({ scrolled: false });
     this.updateUrl({ sort: val, pageCursor: undefined });
   }
 
   handleListingTypeChange(val: ListingType) {
-    this.setState({ scrolled: false });
     this.updateUrl({ listingType: val, pageCursor: undefined });
   }
 
   handleDataTypeChange(val: DataType) {
-    this.setState({ scrolled: false });
     this.updateUrl({ dataType: val, pageCursor: undefined });
   }
 
diff --git a/src/shared/components/person/settings.tsx b/src/shared/components/person/settings.tsx
index 6a922c3fc..bd1905e35 100644
--- a/src/shared/components/person/settings.tsx
+++ b/src/shared/components/person/settings.tsx
@@ -66,7 +66,7 @@ import { PersonListing } from "./person-listing";
 import { InitialFetchRequest } from "../../interfaces";
 import TotpModal from "../common/totp-modal";
 import { LoadingEllipses } from "../common/loading-ellipses";
-import { refreshTheme, setThemeOverride } from "../../utils/browser";
+import { refreshTheme, setThemeOverride, snapToTop } from "../../utils/browser";
 import { getHttpBaseInternal } from "../../utils/env";
 import { IRoutePropsWithFetch } from "../../routes";
 import { RouteComponentProps } from "inferno-router/dist/Route";
@@ -1580,7 +1580,7 @@ export class Settings extends Component<SettingsRouteProps, SettingsState> {
       }
 
       toast(I18NextService.i18n.t("saved"));
-      window.scrollTo(0, 0);
+      snapToTop();
     }
 
     setThemeOverride(undefined);
@@ -1600,7 +1600,7 @@ export class Settings extends Component<SettingsRouteProps, SettingsState> {
         old_password,
       });
       if (changePasswordRes.state === "success") {
-        window.scrollTo(0, 0);
+        snapToTop();
         toast(I18NextService.i18n.t("password_changed"));
       }
 
diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index dc595558c..92ff4ce62 100644
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -995,7 +995,6 @@ export class Search extends Component<SearchRouteProps, SearchState> {
           limit: fetchLimit,
         }),
       });
-      window.scrollTo(0, 0);
 
       if (myAuth()) {
         this.setState({ resolveObjectRes: LOADING_REQUEST });

From c612432eed80910b37d0e39ffcfdc039fcce959f Mon Sep 17 00:00:00 2001
From: Matthias Camenzind <matc.pub@protonmail.com>
Date: Thu, 11 Apr 2024 10:35:24 +0200
Subject: [PATCH 5/5] Scroll to comments without reloading post

---
 src/shared/components/post/post-listing.tsx | 2 ++
 src/shared/components/post/post.tsx         | 8 ++++++++
 2 files changed, 10 insertions(+)

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 6f95cd0c7..76ca3dc63 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -91,6 +91,7 @@ interface PostListingProps {
   onAddAdmin(form: AddAdmin): Promise<void>;
   onTransferCommunity(form: TransferCommunity): Promise<void>;
   onMarkPostAsRead(form: MarkPostAsRead): void;
+  onScrollIntoCommentsClick?(e: MouseEvent): void;
 }
 
 @tippyMixin
@@ -637,6 +638,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         title={title}
         to={`/post/${pv.post.id}?scrollToComments=true`}
         data-tippy-content={title}
+        onClick={this.props.onScrollIntoCommentsClick}
       >
         <Icon icon="message-square" classes="me-1" inline />
         {pv.counts.comments}
diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx
index d5127db55..69519acf0 100644
--- a/src/shared/components/post/post.tsx
+++ b/src/shared/components/post/post.tsx
@@ -195,6 +195,8 @@ export class Post extends Component<PostRouteProps, PostState> {
     this.handleSavePost = this.handleSavePost.bind(this);
     this.handlePurgePost = this.handlePurgePost.bind(this);
     this.handleFeaturePost = this.handleFeaturePost.bind(this);
+    this.handleScrollIntoCommentsClick =
+      this.handleScrollIntoCommentsClick.bind(this);
 
     this.state = { ...this.state, commentSectionRef: createRef() };
 
@@ -299,6 +301,11 @@ export class Post extends Component<PostRouteProps, PostState> {
     document.addEventListener("scroll", this.commentScrollDebounced);
   }
 
+  handleScrollIntoCommentsClick(e: MouseEvent) {
+    this.scrollIntoCommentSection();
+    e.preventDefault();
+  }
+
   get checkScrollIntoCommentsParam() {
     return (
       Boolean(
@@ -398,6 +405,7 @@ export class Post extends Component<PostRouteProps, PostState> {
                 onTransferCommunity={this.handleTransferCommunity}
                 onFeaturePost={this.handleFeaturePost}
                 onMarkPostAsRead={() => {}}
+                onScrollIntoCommentsClick={this.handleScrollIntoCommentsClick}
               />
               <div ref={this.state.commentSectionRef} className="mb-2" />