UX: preload muted categories list to prevent rendering delay.

This commit is contained in:
Vinoth Kannan 2020-08-12 00:34:40 +05:30
parent ee366f7ac7
commit f3154e783f
3 changed files with 25 additions and 26 deletions

View File

@ -26,8 +26,7 @@
{{d-icon mutedToggleIcon}} {{d-icon mutedToggleIcon}}
{{/if}} {{/if}}
</a> </a>
{{#if showMutedCategories}} <table class="category-list {{if showTopics "with-topics"}} {{unless showMutedCategories "hidden"}}">
<table class="category-list {{if showTopics "with-topics"}}">
<thead> <thead>
<tr> <tr>
<th class="category"><span aria-role="heading" aria-level="2" id="categories-only-category">{{i18n "categories.category"}}</span></th> <th class="category"><span aria-role="heading" aria-level="2" id="categories-only-category">{{i18n "categories.category"}}</span></th>
@ -43,7 +42,6 @@
{{/each}} {{/each}}
</tbody> </tbody>
</table> </table>
{{/if}}
</div> </div>
{{/if}} {{/if}}
{{/if}} {{/if}}

View File

@ -15,13 +15,11 @@
{{d-icon mutedToggleIcon}} {{d-icon mutedToggleIcon}}
{{/if}} {{/if}}
</a> </a>
{{#if showMutedCategories}} <div class="category-list {{if showTopics "with-topics"}} {{unless showMutedCategories "hidden"}}">
<div class="category-list {{if showTopics "with-topics"}}">
{{#each mutedCategories as |c|}} {{#each mutedCategories as |c|}}
{{parent-category-row category=c showTopics=showTopics listType="muted"}} {{parent-category-row category=c showTopics=showTopics listType="muted"}}
{{/each}} {{/each}}
</div> </div>
{{/if}}
</div> </div>
{{/if}} {{/if}}
{{/if}} {{/if}}

View File

@ -18,6 +18,9 @@
} }
} }
} }
&.hidden {
display: none;
}
} }
.category-boxes, .category-boxes,
@ -352,7 +355,7 @@
padding: 0.75em; padding: 0.75em;
border-left-width: 6px; border-left-width: 6px;
border-right: none 0; border-right: none 0;
margin: 0 0 1em -3px; margin-left: -3px;
.d-icon { .d-icon {
color: var(--primary-medium); color: var(--primary-medium);