fix(mod queue): items shouldn't disappear from feed unless api removes them

src/views/mod-queue/mod-queue.module.css

@@ -166,6 +166,11 @@
     color: var(--mod-queue-button-text-color-hover);
     text-decoration: var(--mod-queue-button-text-decoration);
   }
+
+  .button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 }
 
 .approve {
@@ -270,6 +275,11 @@
     background: var(--button-background-color-mobile);
   }
 
+  .button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
   .header {
     flex-direction: column;
     align-items: flex-start;

src/views/mod-queue/mod-queue.tsx

@@ -53,6 +53,7 @@ const ModQueueRow = ({ comment, showBoardColumn = false }: ModQueueRowProps) =>
       await approve();
     } catch (e) {
       console.error(e);
+    } finally {
       setIsModerating(false);
     }
   };
@@ -63,14 +64,11 @@ const ModQueueRow = ({ comment, showBoardColumn = false }: ModQueueRowProps) =>
       await reject();
     } catch (e) {
       console.error(e);
+    } finally {
       setIsModerating(false);
     }
   };
 
-  if (isModerating) {
-    return null; // Or show a loading state / fade out
-  }
-
   const excerpt = title || content || (getHasThumbnail(getCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight), link) ? t('image') : t('no_content'));
   const postUrl = `/${boardPath}/thread/${threadCid || cid}`;
 
@@ -88,10 +86,10 @@ const ModQueueRow = ({ comment, showBoardColumn = false }: ModQueueRowProps) =>
       </div>
       <div className={`${styles.time} ${isOverThreshold ? styles.alert : ''}`}>{formatDistanceToNow(timestamp * 1000, { addSuffix: false })}</div>
       <div className={styles.actions}>
-        <button className={`${styles.button} ${styles.approve}`} onClick={handleApprove}>
+        <button className={`${styles.button} ${styles.approve}`} onClick={handleApprove} disabled={isModerating}>
           {t('approve')}
         </button>
-        <button className={`${styles.button} ${styles.reject}`} onClick={handleReject}>
+        <button className={`${styles.button} ${styles.reject}`} onClick={handleReject} disabled={isModerating}>
           {t('reject')}
         </button>
         <Link to={postUrl} className={styles.button}>