Flash 'show' setting if all comments are filtered

src/pages/thread/CommentSection.js

@@ -95,7 +95,7 @@ const filterCommentTree = (comments, filterFunction) => {
   return hasOkComment
 }
 
-let commentTree, lastTotal, lastRoot, lastFilter, lastSort
+let commentTree, lastTotal, lastRoot, lastFilter, lastSort, lengthBeforeFiltering
 
 const commentSection = (props) => {
   console.time('Build comment tree')
@@ -109,8 +109,10 @@ const commentSection = (props) => {
       commentFilter === filter.deleted
     )
   ))
-  if (needsRebuild)
+  if (needsRebuild) {
     commentTree = unflatten(props.comments, root, props.postID)
+    lengthBeforeFiltering = commentTree.length
+  }
 
   if (needsRebuild || commentFilter !== lastFilter) {
     if (commentFilter === filter.removedDeleted) {
@@ -140,6 +142,8 @@ const commentSection = (props) => {
   lastSort   = commentSort
   console.timeEnd('Build comment tree')
 
+  props.setAllCommentsFiltered(commentTree.length == 0 && lengthBeforeFiltering > 0)
+
   console.time('Build html tree')
   const htmlTree = (
     commentTree.length !== 0

src/pages/thread/SortBy.js

@@ -22,7 +22,7 @@ const sortBy = props => {
     </select>
     <span className='space' />
   </span>
-  <span className='nowrap'>
+  <span className={props.allCommentsFiltered ? 'nowrap attention' : 'nowrap'}>
     <label htmlFor='commentFilter'>show:</label>
     <select id='commentFilter' defaultValue={props.global.state.commentFilter}
       onMouseDown={() => usedMouse = true}

src/pages/thread/index.js

@@ -57,10 +57,12 @@ class Thread extends React.Component {
     pushshiftCommentLookup: new Map(),
     removed: 0,
     deleted: 0,
+    allCommentsFiltered: false,
     loadedAllComments: false,
     loadingComments: true,
     reloadingComments: false
   }
+  nextAllCommentsFiltered = false
 
   // A 'contig' is an object representing a contiguous block of comments currently being downloaded or already
   // downloaded, e.g. { firstCreated: #, lastCreated: # } (secs past the epoch; min. value of EARLIEST_CREATED)
@@ -342,6 +344,9 @@ class Thread extends React.Component {
         document.getElementById(id)?.scrollIntoView({behavior: location.state.scrollBehavior})
       delete location.state
     }
+
+    if (this.nextAllCommentsFiltered != this.state.allCommentsFiltered)
+      this.setState({allCommentsFiltered: this.nextAllCommentsFiltered})
   }
 
   // Before calling, either create (and set to current) a new contig to begin downloading
@@ -523,6 +528,7 @@ class Thread extends React.Component {
           deleted={this.state.deleted}
         />
         <SortBy
+          allCommentsFiltered={this.state.allCommentsFiltered}
           loadedAllComments={this.state.loadedAllComments}
           reloadingComments={reloadingComments}
           total={this.state.pushshiftCommentLookup.size}
@@ -552,6 +558,7 @@ class Thread extends React.Component {
               commentSort={this.props.global.state.commentSort}      // pass in these props
               reloadingComments={reloadingComments}                  // to ensure React.memo
               total={this.state.pushshiftCommentLookup.size}         // works correctly
+              setAllCommentsFiltered={filtered => this.nextAllCommentsFiltered = filtered}
             />
             <LoadMore
               loadedAllComments={this.state.loadedAllComments}

src/sass/post.sass

@@ -46,3 +46,12 @@
     @media (prefers-color-scheme: light)
       color: var(--l-light)
       background-color: var(--l-background)
+
+  .attention
+    outline: 3px solid $removed
+    border-radius: 2px
+    animation: attention-anim 1s steps(2, jump-none) 2
+
+  @keyframes attention-anim
+    100%
+      outline-style: none