Skip to content

Commit 10c5e9b

Browse files
Turbo87Turbo87
committed
index: Replace loading spinners with list item placeholders
1 parent 80d04d2 commit 10c5e9b

12 files changed

+193
-81
lines changed

‎app/components/category-list.hbs

-10
This file was deleted.

‎app/components/crate-list-name-only.hbs

-10
This file was deleted.

‎app/components/crate-list-newest.hbs

-11
This file was deleted.

‎app/components/front-page-list.hbs

-5
This file was deleted.

‎app/components/front-page-list.module.css

-5
This file was deleted.

‎app/components/front-page-list/item.hbs

+7-9
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
<li>
2-
<LinkTo @route={{@route}} @model={{@model}} local-class="link" ...attributes>
3-
<div local-class="left">
4-
<div local-class="title">{{@title}}</div>
5-
{{#if @subtitle}}<div local-class="subtitle">{{@subtitle}}</div>{{/if}}
6-
</div>
7-
{{svg-jar "chevron-right" local-class="right"}}
8-
</LinkTo>
9-
</li>
1+
<LinkTo @route={{@route}} @model={{@model}} local-class="link" ...attributes>
2+
<div local-class="left">
3+
<div local-class="title">{{@title}}</div>
4+
{{#if @subtitle}}<div local-class="subtitle">{{@subtitle}}</div>{{/if}}
5+
</div>
6+
{{svg-jar "chevron-right" local-class="right"}}
7+
</LinkTo>

‎app/components/front-page-list/item/placeholder.hbs

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div local-class="link" ...attributes>
2+
<div local-class="left">
3+
<div local-class="title"></div>
4+
{{#if @withSubtitle}}<div local-class="subtitle"></div>{{/if}}
5+
</div>
6+
{{svg-jar "chevron-right" local-class="right"}}
7+
</div>

‎app/components/front-page-list/item/placeholder.module.css

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.link {
2+
display: flex;
3+
align-items: center;
4+
width: 100%;
5+
min-height: 60px;
6+
margin: 8px 0;
7+
padding: 0 10px;
8+
background-color: var(--main-bg-dark);
9+
}
10+
11+
.left {
12+
flex-grow: 1;
13+
width: 0;
14+
}
15+
16+
.title {
17+
height: 16px;
18+
width: 150px;
19+
border-radius: 8px;
20+
background: rgb(118, 131, 138);
21+
opacity: 0.25;
22+
}
23+
24+
.subtitle {
25+
height: 13px;
26+
width: 90px;
27+
margin-top: 4px;
28+
border-radius: 6.5px;
29+
background: rgb(118, 131, 138);
30+
opacity: 0.2;
31+
}
32+
33+
.right {
34+
flex-shrink: 0;
35+
height: 16px;
36+
width: auto;
37+
margin-left: 10px;
38+
color: rgb(118, 131, 138);
39+
}

‎app/components/keyword-list.hbs

-10
This file was deleted.

‎app/helpers/placeholders.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { helper } from '@ember/component/helper';
2+
3+
export default helper(([count]) => new Array(count));

‎app/styles/index.module.css

+4-9
Original file line numberDiff line numberDiff line change
@@ -86,14 +86,9 @@
8686
font-size: 105%;
8787
line-height: 20px;
8888
}
89-
90-
> section[aria-busy="true"] > h2::after {
91-
content: '';
92-
background-image: url('/assets/ajax-loader.gif');
93-
display: inline-block;
94-
height: 16px;
95-
width: 16px;
96-
margin-left: 10px;
97-
}
9889
}
9990

91+
.list {
92+
list-style: none;
93+
padding: 0;
94+
}

‎app/templates/index.hbs

+133-12
Original file line numberDiff line numberDiff line change
@@ -36,28 +36,149 @@
3636
</div>
3737

3838
<div local-class='lists'>
39-
<section data-test-new-crates aria-busy="{{this.dataTask.isRunning}}">
39+
<section data-test-new-crates>
4040
<h2>New Crates</h2>
41-
<CrateListNewest @crates={{this.model.new_crates}} />
41+
<ol local-class="list" aria-busy="{{this.dataTask.isRunning}}">
42+
{{#if this.dataTask.isRunning}}
43+
{{#each (placeholders 10)}}
44+
<li>
45+
<FrontPageList::Item::Placeholder @withSubtitle={{true}} />
46+
</li>
47+
{{/each}}
48+
{{else}}
49+
{{#each this.model.new_crates as |crate index|}}
50+
<li>
51+
<FrontPageList::Item
52+
@route="crate"
53+
@model={{crate.id}}
54+
@title={{crate.name}}
55+
@subtitle="v{{crate.newest_version}}"
56+
data-test-crate-link={{index}}
57+
/>
58+
</li>
59+
{{/each}}
60+
{{/if}}
61+
</ol>
4262
</section>
43-
<section data-test-most-downloaded aria-busy="{{this.dataTask.isRunning}}">
63+
64+
<section data-test-most-downloaded>
4465
<h2>Most Downloaded</h2>
45-
<CrateListNameOnly @crates={{this.model.most_downloaded}} />
66+
<ol local-class="list" aria-busy="{{this.dataTask.isRunning}}">
67+
{{#if this.dataTask.isRunning}}
68+
{{#each (placeholders 10)}}
69+
<li>
70+
<FrontPageList::Item::Placeholder />
71+
</li>
72+
{{/each}}
73+
{{else}}
74+
{{#each this.model.most_downloaded as |crate index|}}
75+
<li>
76+
<FrontPageList::Item
77+
@route="crate"
78+
@model={{crate.id}}
79+
@title={{crate.name}}
80+
data-test-crate-link={{index}}
81+
/>
82+
</li>
83+
{{/each}}
84+
{{/if}}
85+
</ol>
4686
</section>
47-
<section data-test-just-updated aria-busy="{{this.dataTask.isRunning}}">
87+
88+
<section data-test-just-updated>
4889
<h2>Just Updated</h2>
49-
<CrateListNewest @crates={{this.model.just_updated}} />
90+
<ol local-class="list" aria-busy="{{this.dataTask.isRunning}}">
91+
{{#if this.dataTask.isRunning}}
92+
{{#each (placeholders 10)}}
93+
<li>
94+
<FrontPageList::Item::Placeholder @withSubtitle={{true}} />
95+
</li>
96+
{{/each}}
97+
{{else}}
98+
{{#each this.model.just_updated as |crate index|}}
99+
<li>
100+
<FrontPageList::Item
101+
@route="crate"
102+
@model={{crate.id}}
103+
@title={{crate.name}}
104+
@subtitle="v{{crate.newest_version}}"
105+
data-test-crate-link={{index}}
106+
/>
107+
</li>
108+
{{/each}}
109+
{{/if}}
110+
</ol>
50111
</section>
51-
<section data-test-most-recently-downloaded aria-busy="{{this.dataTask.isRunning}}">
112+
113+
<section data-test-most-recently-downloaded>
52114
<h2>Most Recent Downloads</h2>
53-
<CrateListNameOnly @crates={{this.model.most_recently_downloaded}} />
115+
<ol local-class="list" aria-busy="{{this.dataTask.isRunning}}">
116+
{{#if this.dataTask.isRunning}}
117+
{{#each (placeholders 10)}}
118+
<li>
119+
<FrontPageList::Item::Placeholder />
120+
</li>
121+
{{/each}}
122+
{{else}}
123+
{{#each this.model.most_recently_downloaded as |crate index|}}
124+
<li>
125+
<FrontPageList::Item
126+
@route="crate"
127+
@model={{crate.id}}
128+
@title={{crate.name}}
129+
data-test-crate-link={{index}}
130+
/>
131+
</li>
132+
{{/each}}
133+
{{/if}}
134+
</ol>
54135
</section>
55-
<section data-test-keywords aria-busy="{{this.dataTask.isRunning}}">
136+
137+
<section data-test-keywords>
56138
<h2>Popular Keywords <LinkTo @route="keywords">(see all)</LinkTo></h2>
57-
<KeywordList @keywords={{this.model.popular_keywords}} />
139+
<ul local-class="list" aria-busy="{{this.dataTask.isRunning}}">
140+
{{#if this.dataTask.isRunning}}
141+
{{#each (placeholders 10)}}
142+
<li>
143+
<FrontPageList::Item::Placeholder @withSubtitle={{true}} />
144+
</li>
145+
{{/each}}
146+
{{else}}
147+
{{#each this.model.popular_keywords as |keyword|}}
148+
<li>
149+
<FrontPageList::Item
150+
@route="keyword"
151+
@model={{keyword}}
152+
@title={{keyword.id}}
153+
@subtitle="{{format-num keyword.crates_cnt}} crates"
154+
/>
155+
</li>
156+
{{/each}}
157+
{{/if}}
158+
</ul>
58159
</section>
59-
<section data-test-categories aria-busy="{{this.dataTask.isRunning}}">
160+
161+
<section data-test-categories>
60162
<h2>Popular Categories <LinkTo @route="categories">(see all)</LinkTo></h2>
61-
<CategoryList @categories={{this.model.popular_categories}} />
163+
<ul local-class="list" aria-busy="{{this.dataTask.isRunning}}">
164+
{{#if this.dataTask.isRunning}}
165+
{{#each (placeholders 10)}}
166+
<li>
167+
<FrontPageList::Item::Placeholder @withSubtitle={{true}} />
168+
</li>
169+
{{/each}}
170+
{{else}}
171+
{{#each this.model.popular_categories as |category|}}
172+
<li>
173+
<FrontPageList::Item
174+
@route="category"
175+
@model={{category.slug}}
176+
@title={{category.category}}
177+
@subtitle="{{format-num category.crates_cnt}} crates"
178+
/>
179+
</li>
180+
{{/each}}
181+
{{/if}}
182+
</ul>
62183
</section>
63184
</div>

0 commit comments

Comments
 (0)