Implement Scroll to Bottom on Timeline V2

[marcustyphoon]

Description

This implements Scroll to Bottom on V2 timelines.

As noted in the linked issue, on V2 timelines, the loader element we need to detect so that we keep scrolling conditionally:

• Isn't the last child of its parent anymore (and doesn't have a classname iirc?)
• Doesn't exist unless the timeline is actively loading content

Thus, this:

• Fixes the selector
• Implements new logic: scrolling will stop after a short delay unless a loader is added during the delay window. (This is basically equivalent to "debounce the stopscrolling function" in some meaningful sense, though I believe literally doing that has some bad edge cases. Didn't think this through much; if that works we should do it so the code is easier to understand.)

Resolves #1491.

Merge conflicts spectacularly with #977, but what can you do, I guess. (#1492, is what.)

Testing steps

not formally tested as of this pr description update; should be tested on following/followers/activity as well as post timelines

edit: tested (works, stops at end) on:

• following
• followers
• activity

[AprilSylph]

This PR is in need of a rename prior to merging.

(master branch) (#1492) would look a little silly in the changelog.

[marcustyphoon]

This PR is in need of a rename prior to merging.

(master branch) (#1492) would look a little silly in the changelog.

Or a rename during the squash merge, but yep!

[AprilSylph]

Seems to work fine:

• /dashboard: just kept scrolling, as it would
• /blog/april-codes: all 304 posts loaded, then stopped scrolling

[AprilSylph]

Or a rename during the squash merge, but yep!

I don't like doing that unless it's my own PRs...

[Remembers I'm only reviewing your PRs, not merging them for you]

Ohhhhhh yeah...

[marcustyphoon]

Oh, grr, why does this not work on queue.

[AprilSylph]

Oh. Queue hasn't been migrated yet. It's probably gonna be one of the last timelines migrated, since the reordering logic.

[AprilSylph]

I tested this on a V1 timeline (/explore/answertime) and it worked there, though? Loaded everything, then stopped.

[marcustyphoon]

Yeah—I thought I just needed to add sortableContainer along with scrollContainer but that's not working, hold on.

[AprilSylph]

ooh, sortableContainer is a literal classname, not an SCSS one. You're not trying to feed it to keyToCss, are you?

[marcustyphoon]

it's WHAT

[AprilSylph]

<div class="sortableContainer">

This might make more sense if you know that Redpop uses SortableJS v1. Or it might not! I've actually touched that code a lot (attempting to upgrade it to v2; I failed) and I don't remember why it's there or like that.

[AprilSylph]

I don't have a queue long enough to test the latest commit, but code LGTM, and I presume you tested it yourself.

[marcustyphoon]

Today I learned: I should probably make my CSS translation dev tool's output have more of a distinction between source and translated class names :D

[AprilSylph]

The way the classnames are shown in development builds of Redpop are {fileName}-{sourceName}--{generatedName}. Most stylesheets are just named style.scss so this ends up easily replicable in most cases by just doing style-{sourceName}--{generatedName}. I ~recently updated my own code snippet to reflect this: https://gist.github.com/AprilSylph/511b809ffec1f4e3b8bcb4af93c1f8cd