feat(data): show skeleton screens before data is loaded

Closes #4

src/app/modules/data/elements/skeleton-list-item.component.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright (C) 2019 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'stapps-skeleton-list-item',
+  templateUrl: 'skeleton-list-item.html',
+})
+export class SkeletonListItem {
+}

src/app/modules/data/elements/skeleton-list-item.html

@@ -0,0 +1,14 @@
+<ion-item>
+<ion-thumbnail slot="start">
+  <ion-skeleton-text animated></ion-skeleton-text>
+</ion-thumbnail>
+  <ion-grid>
+    <ion-row>
+      <ion-col>
+        <h2 class="name"><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></h2>
+        <p><ion-skeleton-text animated style="width: 80%;"></ion-skeleton-text></p>
+        <ion-note><ion-skeleton-text animated style="width: 20%"></ion-skeleton-text></ion-note>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-item>

src/app/modules/data/elements/skeleton-simple-card.component.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright (C) 2019 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'stapps-skeleton-simple-card',
+  templateUrl: 'skeleton-simple-card.html',
+})
+export class SkeletonSimpleCard {
+}

src/app/modules/data/elements/skeleton-simple-card.html

@@ -0,0 +1,8 @@
+<ion-card>
+  <ion-card-header>
+    <ion-skeleton-text animated style="width: 15%"></ion-skeleton-text>
+  </ion-card-header>
+  <ion-card-content>
+    <p><ion-skeleton-text animated style="width: 85%;"></ion-skeleton-text></p>
+  </ion-card-content>
+</ion-card>