Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
app/assets/javascripts/discourse/app/templates/components/categories-only.hbs
View File

@ -26,24 +26,22 @@
{{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> <th class="topics">{{i18n "categories.topics"}}</th>
<th class="topics">{{i18n "categories.topics"}}</th> {{#if showTopics}}
{{#if showTopics}} <th class="latest">{{i18n "categories.latest"}}</th>
<th class="latest">{{i18n "categories.latest"}}</th> {{/if}}
{{/if}} </tr>
</tr> </thead>
</thead> <tbody aria-labelledby="categories-only-category">
<tbody aria-labelledby="categories-only-category"> {{#each categories as |category|}}
{{#each categories as |category|}} {{parent-category-row category=category showTopics=showTopics listType="muted"}}
{{parent-category-row category=category showTopics=showTopics listType="muted"}} {{/each}}
{{/each}} </tbody>
</tbody> </table>
</table>
{{/if}}
</div> </div>
{{/if}} {{/if}}
{{/if}} {{/if}}

12
app/assets/javascripts/discourse/app/templates/mobile/components/categories-only.hbs
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}}

5
app/assets/stylesheets/common/base/category-list.scss
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);