From e48590b9d6c37403c7ef64d3587d082d645b68cd Mon Sep 17 00:00:00 2001
From: matc-pub <161147791+matc-pub@users.noreply.github.com>
Date: Thu, 11 Apr 2024 19:18:07 +0200
Subject: [PATCH] Use mixins and decorators for scroll restoration and tippy
 cleanup (#2415)

* Enable @babel/plugin-proposal-decorators

Dependency already exists

* 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).

* 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".

* Drop individual scrollTo calls

* Scroll to comments without reloading post

---------

Co-authored-by: SleeplessOne1917 <28871516+SleeplessOne1917@users.noreply.github.com>
---
 .babelrc                                      |   7 +-
 .eslintrc.json                                |   4 +
 src/client/index.tsx                          |   2 +
 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/communities.tsx      |   9 +-
 .../components/community/community-form.tsx   |   2 +
 src/shared/components/community/community.tsx |  28 ++--
 .../components/community/create-community.tsx |   8 +-
 src/shared/components/community/sidebar.tsx   |   2 +
 src/shared/components/home/admin-settings.tsx |   8 +-
 src/shared/components/home/emojis-form.tsx    |   2 +
 src/shared/components/home/home.tsx           |  33 ++--
 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/home/site-sidebar.tsx   |   2 +
 src/shared/components/home/tagline-form.tsx   |   2 +
 src/shared/components/mixins/scroll-mixin.ts  | 145 ++++++++++++++++++
 src/shared/components/mixins/tippy-mixin.ts   |  25 +++
 src/shared/components/modlog.tsx              |   7 +
 src/shared/components/person/cake-day.tsx     |   2 +
 src/shared/components/person/inbox.tsx        |  16 +-
 .../components/person/password-change.tsx     |   8 +-
 .../components/person/person-details.tsx      |   5 -
 src/shared/components/person/profile.tsx      |  15 +-
 .../person/registration-applications.tsx      |  10 +-
 src/shared/components/person/reports.tsx      |  12 +-
 src/shared/components/person/settings.tsx     |  12 +-
 src/shared/components/person/verify-email.tsx |   8 +-
 src/shared/components/post/create-post.tsx    |   2 +
 src/shared/components/post/post-form.tsx      |   2 -
 src/shared/components/post/post-listing.tsx   |   7 +-
 src/shared/components/post/post-report.tsx    |   2 +
 src/shared/components/post/post.tsx           |  41 ++---
 .../create-private-message.tsx                |   7 +
 .../private_message/private-message-form.tsx  |   5 -
 .../private-message-report.tsx                |   2 +
 .../private_message/private-message.tsx       |   2 +
 src/shared/components/remote-fetch.tsx        |   8 +-
 src/shared/components/search.tsx              |  18 ++-
 src/shared/tippy.ts                           |  64 ++++++--
 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 +
 tsconfig.json                                 |   2 +-
 62 files changed, 571 insertions(+), 143 deletions(-)
 create mode 100644 src/shared/components/mixins/scroll-mixin.ts
 create mode 100644 src/shared/components/mixins/tippy-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/.babelrc b/.babelrc
index fbfb0025..0b2c6939 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/.eslintrc.json b/.eslintrc.json
index 4d0e7562..651ba006 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/client/index.tsx b/src/client/index.tsx
index f2518e8f..db0a9ef7 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/app/app.tsx b/src/shared/components/app/app.tsx
index 30f445f7..1538b045 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 390cd718..1cfb40f2 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 895f9b47..056fe14d 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 115ad2e9..f0f0ef85 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 ee665969..a5ca7006 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 70381fcd..58693f12 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 0d131be4..ab061071 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 a35da213..abc945c9 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 3a9f69d2..a91b2a9d 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 2e338783..518cacb6 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 74990ca4..e5af460e 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 d67d2bce..cd0450f2 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/communities.tsx b/src/shared/components/community/communities.tsx
index 82474f30..ac2324fb 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);
@@ -374,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-form.tsx b/src/shared/components/community/community-form.tsx
index 327a75b1..206fc841 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 8f9c8764..8ec272cb 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";
@@ -87,7 +92,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 +177,8 @@ export type CommunityFetchConfig = IRoutePropsWithFetch<
   CommunityProps
 >;
 
+@scrollMixin
+@tippyMixin
 export class Community extends Component<CommunityRouteProps, State> {
   private isoData = setIsoData<CommunityData>(this.context);
   state: State = {
@@ -184,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);
 
@@ -253,8 +270,6 @@ export class Community extends Component<CommunityRouteProps, State> {
     if (!this.state.isIsomorphic) {
       await Promise.all([this.fetchCommunity(), this.fetchData()]);
     }
-
-    setupTippy();
   }
 
   static async fetchInitialData({
@@ -586,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) {
@@ -649,8 +661,6 @@ export class Community extends Component<CommunityRouteProps, State> {
         }),
       });
     }
-
-    setupTippy();
   }
 
   async handleDeleteCommunity(form: DeleteCommunity) {
diff --git a/src/shared/components/community/create-community.tsx b/src/shared/components/community/create-community.tsx
index a1a9a97a..cf9345cb 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/community/sidebar.tsx b/src/shared/components/community/sidebar.tsx
index 79c4b6b9..f3239b37 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/admin-settings.tsx b/src/shared/components/home/admin-settings.tsx
index 7e42acd0..4f5d141d 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/emojis-form.tsx b/src/shared/components/home/emojis-form.tsx
index 9f158a2b..f3d98412 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 56309da2..9944a969 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";
@@ -87,7 +89,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";
@@ -107,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>;
@@ -116,7 +119,6 @@ interface HomeState {
   showTrendingMobile: boolean;
   showSidebarMobile: boolean;
   subscribedCollapsed: boolean;
-  scrolled: boolean;
   tagline?: string;
   siteRes: GetSiteResponse;
   finished: Map<CommentId, boolean | undefined>;
@@ -253,13 +255,14 @@ export type HomeFetchConfig = IRoutePropsWithFetch<
   HomeProps
 >;
 
+@scrollMixin
+@tippyMixin
 export class Home extends Component<HomeRouteProps, HomeState> {
   private isoData = setIsoData<HomeData>(this.context);
   state: HomeState = {
     postsRes: EMPTY_REQUEST,
     commentsRes: EMPTY_REQUEST,
     trendingCommunitiesRes: EMPTY_REQUEST,
-    scrolled: true,
     siteRes: this.isoData.site_res,
     showSubscribedMobile: false,
     showTrendingMobile: false,
@@ -269,6 +272,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);
 
@@ -334,8 +346,6 @@ export class Home extends Component<HomeRouteProps, HomeState> {
     ) {
       await Promise.all([this.fetchTrendingCommunities(), this.fetchData()]);
     }
-
-    setupTippy();
   }
 
   static async fetchInitialData({
@@ -667,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();
   }
 
@@ -852,8 +857,6 @@ export class Home extends Component<HomeRouteProps, HomeState> {
         }),
       });
     }
-
-    setupTippy();
   }
 
   handleShowSubscribedMobile(i: Home) {
@@ -876,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/home/instances.tsx b/src/shared/components/home/instances.tsx
index 81d213d6..8dd4e7f8 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 131011ae..cd499cb8 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 c8705fed..4a7723d8 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 5dbad944..6775f548 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 1714872d..b0398ef9 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/home/site-sidebar.tsx b/src/shared/components/home/site-sidebar.tsx
index 7cb4bff2..3ae43d0b 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 e4625028..ed93f466 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/scroll-mixin.ts b/src/shared/components/mixins/scroll-mixin.ts
new file mode 100644
index 00000000..e327f3f3
--- /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/mixins/tippy-mixin.ts b/src/shared/components/mixins/tippy-mixin.ts
new file mode 100644
index 00000000..a7a55ed9
--- /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/modlog.tsx b/src/shared/components/modlog.tsx
index fdd90f30..b04bcb79 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/cake-day.tsx b/src/shared/components/person/cake-day.tsx
index 3eeaf75e..bef6e47f 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/inbox.tsx b/src/shared/components/person/inbox.tsx
index 239e3340..53ba54bf 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 2d3d3df2..c0d2a407 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/person-details.tsx b/src/shared/components/person/person-details.tsx
index 7b0498a9..90ee16e7 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 e74a324d..bb560743 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";
@@ -82,7 +83,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";
@@ -183,6 +183,7 @@ export type ProfileFetchConfig = IRoutePropsWithFetch<
   ProfileProps
 >;
 
+@scrollMixin
 export class Profile extends Component<ProfileRouteProps, ProfileState> {
   private isoData = setIsoData<ProfileData>(this.context);
   state: ProfileState = {
@@ -195,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);
 
@@ -249,11 +254,6 @@ export class Profile extends Component<ProfileRouteProps, ProfileState> {
     if (!this.state.isIsomorphic) {
       await this.fetchUserData();
     }
-    setupTippy();
-  }
-
-  componentWillUnmount() {
-    saveScrollPosition(this.context);
   }
 
   async fetchUserData() {
@@ -271,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 8b20c2b8..d738f1ce 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";
@@ -20,7 +21,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";
@@ -58,6 +58,7 @@ export type RegistrationApplicationsFetchConfig = IRoutePropsWithFetch<
   Record<string, never>
 >;
 
+@scrollMixin
 export class RegistrationApplications extends Component<
   RegistrationApplicationsRouteProps,
   RegistrationApplicationsState
@@ -71,6 +72,10 @@ export class RegistrationApplications extends Component<
     isIsomorphic: false,
   };
 
+  loadingSettled() {
+    return resourcesSettled([this.state.appsRes]);
+  }
+
   constructor(props: any, context: any) {
     super(props, context);
 
@@ -91,7 +96,6 @@ export class RegistrationApplications extends Component<
     if (!this.state.isIsomorphic) {
       await this.refetch();
     }
-    setupTippy();
   }
 
   get documentTitle(): string {
diff --git a/src/shared/components/person/reports.tsx b/src/shared/components/person/reports.tsx
index fd6e4bab..742922a5 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 0be95418..bd1905e3 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";
@@ -66,10 +66,11 @@ 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";
+import { simpleScrollMixin } from "../mixins/scroll-mixin";
 
 type SettingsData = RouteDataResponse<{
   instancesRes: GetFederatedInstancesResponse;
@@ -203,6 +204,8 @@ export type SettingsFetchConfig = IRoutePropsWithFetch<
   Record<string, never>
 >;
 
+@simpleScrollMixin
+@tippyMixin
 export class Settings extends Component<SettingsRouteProps, SettingsState> {
   private isoData = setIsoData<SettingsData>(this.context);
   exportSettingsLink = createRef<HTMLAnchorElement>();
@@ -334,7 +337,6 @@ export class Settings extends Component<SettingsRouteProps, SettingsState> {
   }
 
   async componentDidMount() {
-    setupTippy();
     this.setState({ themeList: await fetchThemeList() });
 
     if (!this.state.isIsomorphic) {
@@ -1578,7 +1580,7 @@ export class Settings extends Component<SettingsRouteProps, SettingsState> {
       }
 
       toast(I18NextService.i18n.t("saved"));
-      window.scrollTo(0, 0);
+      snapToTop();
     }
 
     setThemeOverride(undefined);
@@ -1598,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/person/verify-email.tsx b/src/shared/components/person/verify-email.tsx
index e8f116c4..73a5c99d 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 8adf5080..5e3673bb 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-form.tsx b/src/shared/components/post/post-form.tsx
index 365fb250..7b7c16d1 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 8ac43abb..76ca3dc6 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";
@@ -91,8 +91,10 @@ interface PostListingProps {
   onAddAdmin(form: AddAdmin): Promise<void>;
   onTransferCommunity(form: TransferCommunity): Promise<void>;
   onMarkPostAsRead(form: MarkPostAsRead): void;
+  onScrollIntoCommentsClick?(e: MouseEvent): void;
 }
 
+@tippyMixin
 export class PostListing extends Component<PostListingProps, PostListingState> {
   state: PostListingState = {
     showEdit: false,
@@ -636,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}
@@ -982,7 +985,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 +1000,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 f5f206b2..4fba6f81 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 f7562943..69519acf 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";
@@ -89,7 +91,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";
@@ -135,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;
@@ -153,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);
 
@@ -189,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() };
 
@@ -237,10 +245,6 @@ export class Post extends Component<PostRouteProps, PostState> {
       commentsRes,
     });
 
-    setupTippy();
-
-    if (!this.state.commentId) restoreScrollPosition(this.context);
-
     if (this.checkScrollIntoCommentsParam) {
       this.scrollIntoCommentSection();
     }
@@ -284,8 +288,6 @@ export class Post extends Component<PostRouteProps, PostState> {
 
   componentWillUnmount() {
     document.removeEventListener("scroll", this.commentScrollDebounced);
-
-    saveScrollPosition(this.context);
   }
 
   async componentDidMount() {
@@ -299,16 +301,16 @@ 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();
-    }
+  handleScrollIntoCommentsClick(e: MouseEvent) {
+    this.scrollIntoCommentSection();
+    e.preventDefault();
   }
 
   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"
     );
   }
 
@@ -403,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" />
 
diff --git a/src/shared/components/private_message/create-private-message.tsx b/src/shared/components/private_message/create-private-message.tsx
index ea8d5e3a..f50a012a 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/private_message/private-message-form.tsx b/src/shared/components/private_message/private-message-form.tsx
index 3298115a..40a75114 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 39e98c97..22fa52eb 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 dd59d061..851b0754 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/components/remote-fetch.tsx b/src/shared/components/remote-fetch.tsx
index f4b6699f..3627ae8e 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 a883c78d..4d49a352 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: {
@@ -991,8 +995,6 @@ export class Search extends Component<SearchRouteProps, SearchState> {
           limit: fetchLimit,
         }),
       });
-      window.scrollTo(0, 0);
-      restoreScrollPosition(this.context);
 
       if (myAuth()) {
         this.setState({ resolveObjectRes: LOADING_REQUEST });
diff --git a/src/shared/tippy.ts b/src/shared/tippy.ts
index 6bb8760d..b890b1a1 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() {
-  if (isBrowser()) {
-    tippyInstance.forEach((e: any) => e.destroy());
-    tippyInstance = tippy("[data-tippy-content]", {
-      delay: [500, 0],
-      // Display on "long press"
-      touch: ["hold", 500],
-    });
+export function setupTippy(root: RefObject<Element>) {
+  if (!instance && root.current) {
+    instance = tippyDelegate(root.current, tippyDelegateOptions);
   }
 }
+
+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;
+}
diff --git a/src/shared/utils/browser/index.ts b/src/shared/utils/browser/index.ts
index 98c2bba8..6a6682bc 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 00000000..40b0125e
--- /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 6986ae59..00000000
--- 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 596d5d9f..00000000
--- 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 00000000..ac411010
--- /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 9f862c55..58eec8cc 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 00000000..bbc8b68e
--- /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");
+}
diff --git a/tsconfig.json b/tsconfig.json
index aa4f70de..ed575528 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": {