feat(post): add 'loading comments' indicator

src/components/board-buttons/board-buttons.tsx

@@ -10,6 +10,7 @@ import CatalogFilters from '../../views/catalog/catalog-filters/';
 import styles from './board-buttons.module.css';
 import Tooltip from '../tooltip';
 import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
+import _ from 'lodash';
 
 interface BoardButtonsProps {
   address?: string | undefined;
@@ -223,6 +224,7 @@ export const MobileBoardButtons = () => {
 };
 
 const PostPageStats = () => {
+  const { t } = useTranslation();
   const params = useParams();
   const location = useLocation();
   const isInDescriptionView = isDescriptionView(location.pathname, params);
@@ -232,11 +234,14 @@ const PostPageStats = () => {
   const { closed, pinned, replyCount } = comment || {};
   const linkCount = useCountLinksInReplies(comment);
 
+  const displayReplyCount = replyCount ? replyCount.toString() : '?';
+  const replyCountTooltip = replyCount ? _.capitalize(t('replies')) : t('loading');
+
   return (
     <span>
-      {(pinned || isInDescriptionView || isInRulesView) && 'Sticky / '}
-      {(closed || isInDescriptionView || isInRulesView) && 'Closed / '}
-      <Tooltip children={replyCount?.toString()} content='Replies' /> / <Tooltip children={linkCount?.toString()} content='Links' />
+      {(pinned || isInDescriptionView || isInRulesView) && `${_.capitalize(t('sticky'))} / `}
+      {(closed || isInDescriptionView || isInRulesView) && `${_.capitalize(t('closed'))} / `}
+      <Tooltip children={displayReplyCount} content={replyCountTooltip} /> / <Tooltip children={linkCount?.toString()} content={_.capitalize(t('links'))} />
     </span>
   );
 };

src/components/post-desktop/post-desktop.tsx

@@ -410,6 +410,11 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
             )}
           </span>
         )}
+        {replyCount === undefined && (
+          <span className={styles.loadingString}>
+            <LoadingEllipsis string={t('loading_comments')} />
+          </span>
+        )}
         {!isHidden &&
           !(pinned && !isInPostPageView && !showOmittedReplies[cid]) &&
           !isInPendingPostView &&

src/components/post-mobile/post-mobile.tsx

@@ -336,6 +336,11 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
                 </div>
               )}
             </div>
+            {replyCount === undefined && (
+              <span className={styles.loadingString}>
+                <LoadingEllipsis string={t('loading_comments')} />
+              </span>
+            )}
             {!(pinned && !isInPostView) &&
               !isInPendingPostView &&
               !isDescription &&

src/views/post/post.module.css

@@ -185,6 +185,11 @@
   color: var(--post-mobile-abbr-text-color);
 }
 
+.loadingString {
+  display: block;
+  color: var(--post-mobile-abbr-text-color);
+} 
+
 .postDesktop .summary .omittedRepliesButtonWrapper {
   position: absolute;
   top: 8px;
@@ -511,6 +516,11 @@
   .replyDesktop {
     display: none;
   }
+
+  .loadingString {
+    margin-top: 10px;
+    margin-left: 5px;
+  } 
 }
 
 @media (min-width: 640px) {