refactor: improve library account views

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

@@ -12,7 +12,7 @@
  * 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';
+import {Component, Input} from '@angular/core';
 
 /**
  * A placeholder to show when a simple card is being loaded
@@ -21,4 +21,16 @@ import {Component} from '@angular/core';
   selector: 'stapps-skeleton-simple-card',
   templateUrl: 'skeleton-simple-card.html',
 })
-export class SkeletonSimpleCardComponent {}
+export class SkeletonSimpleCardComponent {
+  /**
+   * Show title
+   */
+  @Input()
+  title = true;
+
+  /**
+   * The number of lines after the title
+   */
+  @Input()
+  lines = 1;
+}

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

@@ -1,8 +1,14 @@
 <ion-card>
-  <ion-card-header>
+  <ion-card-header *ngIf="title">
     <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>
+    <p>
+      <ion-skeleton-text
+        *ngFor="let line of [].constructor(lines)"
+        animated
+        style="width: 85%"
+      ></ion-skeleton-text>
+    </p>
   </ion-card-content>
 </ion-card>