DEV: Simplify 'dismiss' button display logic (#22467)

Previously we were using the `didInsertElement` hook and querying the DOM to check whether the other button was visible. This is problematic from a performance point of view because it forces the browser to render the layout prematurely. It can also lead to subtle bugs based on the current scroll position.

In addition, having this logic on a `didInsertElement` hook makes it totally incompatible with the new 'loading slider' feature (because the component is not re-rendered between different topic lists).

This commit updates the logic to be based simply on the count of topics in the list. If there are fewer than 5 topics, the top button is hidden.

app/assets/javascripts/discourse/app/components/topic-dismiss-buttons.js

@@ -1,8 +1,6 @@
 import { action } from "@ember/object";
 import showModal from "discourse/lib/show-modal";
-import discourseLater from "discourse-common/lib/later";
+import discourseComputed from "discourse-common/utils/decorators";
-import isElementInViewport from "discourse/lib/is-element-in-viewport";
-import discourseComputed, { on } from "discourse-common/utils/decorators";
 import I18n from "I18n";
 import Component from "@ember/component";
 import { inject as service } from "@ember/service";
@@ -31,23 +29,13 @@ export default Component.extend({
     return `dismiss-new-${position}`;
   },
 
-  @discourseComputed(
+  @discourseComputed("position", "model.topics.length")
-    "position",
+  showBasedOnPosition(position, topicCount) {
-    "isOtherDismissUnreadButtonVisible",
-    "isOtherDismissNewButtonVisible"
-  )
-  showBasedOnPosition(
-    position,
-    isOtherDismissUnreadButtonVisible,
-    isOtherDismissNewButtonVisible
-  ) {
     if (position !== "top") {
       return true;
     }
 
-    return !(
+    return topicCount > 5;
-      isOtherDismissUnreadButtonVisible || isOtherDismissNewButtonVisible
-    );
   },
 
   @discourseComputed("selectedTopics.length")
@@ -72,28 +60,6 @@ export default Component.extend({
     });
   },
 
-  // we want to only render the Dismiss... button at the top of the
-  // page if the user cannot see the bottom Dismiss... button based on their
-  // viewport, or if too many topics fill the page
-  @on("didInsertElement")
-  _determineOtherDismissVisibility() {
-    discourseLater(() => {
-      if (this.position === "top") {
-        this.set(
-          "isOtherDismissUnreadButtonVisible",
-          isElementInViewport(document.getElementById("dismiss-topics-bottom"))
-        );
-        this.set(
-          "isOtherDismissNewButtonVisible",
-          isElementInViewport(document.getElementById("dismiss-new-bottom"))
-        );
-      } else {
-        this.set("isOtherDismissUnreadButtonVisible", true);
-        this.set("isOtherDismissNewButtonVisible", true);
-      }
-    });
-  },
-
   @action
   dismissReadPosts() {
     let dismissTitle = "topics.bulk.dismiss_read";