From f3154e783f295fac41468c33374d41b8ff4fe822 Mon Sep 17 00:00:00 2001
From: Vinoth Kannan <svkn.87@gmail.com>
Date: Wed, 12 Aug 2020 00:34:40 +0530
Subject: [PATCH] UX: preload muted categories list to prevent rendering delay.

---
 .../templates/components/categories-only.hbs  | 34 +++++++++----------
 .../mobile/components/categories-only.hbs     | 12 +++----
 .../common/base/category-list.scss            |  5 ++-
 3 files changed, 25 insertions(+), 26 deletions(-)

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 6784ddfdb85..f5d67b79dd8 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 42e96089b48..e17d6aeba9c 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 2fbda12c5d4..73d1cfd1423 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);