UX: preload muted categories list to prevent rendering delay.

UX: preload muted categories list to prevent rendering delay.

diff --git a/app/assets/javascripts/discourse/app/templates/components/categories-only.hbs b/app/assets/javascripts/discourse/app/templates/components/categories-only.hbs
index 6784ddf..f5d67b7 100644
--- a/app/assets/javascripts/discourse/app/templates/components/categories-only.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/categories-only.hbs
@@ -26,24 +26,22 @@
           {{d-icon mutedToggleIcon}}
         {{/if}}
       </a>
-      {{#if showMutedCategories}}
-        <table class="category-list {{if showTopics "with-topics"}}">
-          <thead>
-            <tr>
-              <th class="category"><span aria-role="heading" aria-level="2" id="categories-only-category">{{i18n "categories.category"}}</span></th>
-              <th class="topics">{{i18n "categories.topics"}}</th>
-              {{#if showTopics}}
-                <th class="latest">{{i18n "categories.latest"}}</th>
-              {{/if}}
-            </tr>
-          </thead>
-          <tbody aria-labelledby="categories-only-category">
-            {{#each categories as |category|}}
-              {{parent-category-row category=category showTopics=showTopics listType="muted"}}
-            {{/each}}
-          </tbody>
-        </table>
-      {{/if}}
+      <table class="category-list {{if showTopics "with-topics"}} {{unless showMutedCategories "hidden"}}">
+        <thead>
+          <tr>
+            <th class="category"><span aria-role="heading" aria-level="2" id="categories-only-category">{{i18n "categories.category"}}</span></th>
+            <th class="topics">{{i18n "categories.topics"}}</th>
+            {{#if showTopics}}
+              <th class="latest">{{i18n "categories.latest"}}</th>
+            {{/if}}
+          </tr>
+        </thead>
+        <tbody aria-labelledby="categories-only-category">
+          {{#each categories as |category|}}
+            {{parent-category-row category=category showTopics=showTopics listType="muted"}}
+          {{/each}}
+        </tbody>
+      </table>
     </div>
   {{/if}}
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/mobile/components/categories-only.hbs b/app/assets/javascripts/discourse/app/templates/mobile/components/categories-only.hbs
index 42e9608..e17d6ae 100644
--- a/app/assets/javascripts/discourse/app/templates/mobile/components/categories-only.hbs
+++ b/app/assets/javascripts/discourse/app/templates/mobile/components/categories-only.hbs
@@ -15,13 +15,11 @@
           {{d-icon mutedToggleIcon}}
         {{/if}}
       </a>
-      {{#if showMutedCategories}}
-        <div class="category-list {{if showTopics "with-topics"}}">
-          {{#each mutedCategories as |c|}}
-            {{parent-category-row category=c showTopics=showTopics listType="muted"}}
-          {{/each}}
-        </div>
-      {{/if}}
+      <div class="category-list {{if showTopics "with-topics"}} {{unless showMutedCategories "hidden"}}">
+        {{#each mutedCategories as |c|}}
+          {{parent-category-row category=c showTopics=showTopics listType="muted"}}
+        {{/each}}
+      </div>
     </div>
   {{/if}}
 {{/if}}
diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss
index 2fbda12..73d1cfd 100644
--- a/app/assets/stylesheets/common/base/category-list.scss
+++ b/app/assets/stylesheets/common/base/category-list.scss
@@ -18,6 +18,9 @@
       }
     }
   }
+  &.hidden {
+    display: none;
+  }
 }
 
 .category-boxes,
@@ -352,7 +355,7 @@
   padding: 0.75em;
   border-left-width: 6px;
   border-right: none 0;
-  margin: 0 0 1em -3px;
+  margin-left: -3px;
 
   .d-icon {
     color: var(--primary-medium);

GitHub sha: f3154e78

What’s the context for this change? I’m curious why we did this.

1 Like

It had rendering delay when dynamically load huge number muted categories. It’s reported by one our customer in PM. Sorry! I think I should add more details in git commit message itself.

1 Like

Thanks for the context. So the solution here is to render them in advance?

2 Likes

Yes, it’s rendered in advance and hidden by the CSS.

2 Likes