index: Replace loading spinners with list item placeholders

Author: Turbo87

app/components/category-list.hbs

@@ -1,9 +1,7 @@
-<li>
-  <LinkTo @route={{@route}} @model={{@model}} local-class="link" ...attributes>
-    <div local-class="left">
-      <div local-class="title">{{@title}}</div>
-      {{#if @subtitle}}<div local-class="subtitle">{{@subtitle}}</div>{{/if}}
-    </div>
-    {{svg-jar "chevron-right" local-class="right"}}
-  </LinkTo>
-</li>
+<LinkTo @route={{@route}} @model={{@model}} local-class="link" ...attributes>
+  <div local-class="left">
+    <div local-class="title">{{@title}}</div>
+    {{#if @subtitle}}<div local-class="subtitle">{{@subtitle}}</div>{{/if}}
+  </div>
+  {{svg-jar "chevron-right" local-class="right"}}
+</LinkTo>

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

@@ -0,0 +1,7 @@
+<div local-class="link" ...attributes>
+  <div local-class="left">
+    <div local-class="title"></div>
+    {{#if @withSubtitle}}<div local-class="subtitle"></div>{{/if}}
+  </div>
+  {{svg-jar "chevron-right" local-class="right"}}
+</div>

app/components/crate-list-newest.hbs

@@ -0,0 +1,39 @@
+.link {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: 60px;
+    margin: 8px 0;
+    padding: 0 10px;
+    background-color: var(--main-bg-dark);
+}
+
+.left {
+    flex-grow: 1;
+    width: 0;
+}
+
+.title {
+    height: 16px;
+    width: 150px;
+    border-radius: 8px;
+    background: rgb(118, 131, 138);
+    opacity: 0.25;
+}
+
+.subtitle {
+    height: 13px;
+    width: 90px;
+    margin-top: 4px;
+    border-radius: 6.5px;
+    background: rgb(118, 131, 138);
+    opacity: 0.2;
+}
+
+.right {
+    flex-shrink: 0;
+    height: 16px;
+    width: auto;
+    margin-left: 10px;
+    color: rgb(118, 131, 138);
+}

app/components/front-page-list.hbs

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