Smooth scroll when going to next page

[BenjaminSchaaf]

People are used to paginating taking a page load, adding a bit of a delay makes it clear that something happened.

[kaste]

With reduced motion disabled, this feels too slow to me in Brave/Windows. (>1s) And we can't tune it. (I mean, it's not a delay but scrolls for a bit over a second, I think I'm seasick now 😁 .)

In Sublime world we usually prefer instant over delayed, but if we must I think we need to go the animation-route.

[braver]

Yeah it's very browser dependent what that does exactly, but it's sometimes better than a clean jump. There is no way to control the scroll animation, probably for reasons because you do need to take accessibility configuration into consideration etc. So in a way I'm not against it, if it's bad it's due to the user-agents implementation.... but in my experience it's indeed not great.

Alternatively, we can do a quick visual "flash" after the content is replaced. Just for a few milliseconds drop the opacity.

[braver]

Interestingly this is kind of buggy in Safari... which kind of typical for Safari 🙄 And it's really slow in Chromium, I find it a bit annoying personally.

Alternatively perhaps:

diff --git a/static/module/list.js b/static/module/list.js
index 332d5940..98d74278 100644
--- a/static/module/list.js
+++ b/static/module/list.js
@@ -132,6 +132,11 @@ export class List {
   renderPage(items, page) {
     this.clear()
 
+    this.section.classList.add('loading-results')
+    window.setTimeout(() => {
+      this.section.classList.remove('loading-results')
+    }, 200)
+
     this.pagination = new Pagination(this, items, page, this.section)
     const pageItems = this.pagination.calculate()
 
diff --git a/static/styles.css b/static/styles.css
index 221d1635..b4035f38 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -271,6 +271,11 @@ section {
       outline: none;
     }
   }
+
+  transition: opacity .2s ease-out;
+  &.loading-results {
+    opacity: .5;
+  }
 }
 
 .search-results-header {