IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-26 02:40:53 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: preload muted categories list to prevent rendering delay.

Browse Source
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}}
{{/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}}

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

@ -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}}

5
app/assets/stylesheets/common/base/category-list.scss
View File

@ -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);