improve skeletons

amay077 · Mar 9, 2023 · ce001f2 · ce001f2
1 parent 177ad48
commit ce001f2
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 24 deletions.
diff --git a/src/app/ui/list/list.component.html b/src/app/ui/list/list.component.html
@@ -70,30 +70,10 @@
     <div *ngIf="error == ''" class="container-fluid main-container">
 
       <ng-container *ngIf="loading">
-        <div class="main-card-skeleton" style="padding: 16px; gap: 8px;">
-          <ngx-skeleton-loader style="display: flex; flex-direction: row; align-items: center;" [theme]="{ 'margin': '0', 'border-radius': '4px', height: '0.8rem', width: '12rem' }" ></ngx-skeleton-loader>
-          <ngx-skeleton-loader style="display: flex; flex-direction: row; align-items: center;" [theme]="{ 'margin': '0', 'border-radius': '4px', height: '1rem' }" ></ngx-skeleton-loader>
-          <ngx-skeleton-loader style="display: flex; flex-direction: row; align-items: center;" [theme]="{ 'margin': '0', 'border-radius': '4px', height: '0.8rem', width: '12rem' }" ></ngx-skeleton-loader>
-        </div>
-        <div class="main-card-skeleton" style="padding: 16px; gap: 8px;">
-          <ngx-skeleton-loader style="display: flex; flex-direction: row; align-items: center;" [theme]="{ 'margin': '0', 'border-radius': '4px', height: '0.8rem', width: '12rem' }" ></ngx-skeleton-loader>
-          <ngx-skeleton-loader style="display: flex; flex-direction: row; align-items: center;" [theme]="{ 'margin': '0', 'border-radius': '4px', height: '1rem' }" ></ngx-skeleton-loader>
-          <ngx-skeleton-loader style="display: flex; flex-direction: row; align-items: center;" [theme]="{ 'margin': '0', 'border-radius': '4px', height: '0.8rem', width: '12rem' }" ></ngx-skeleton-loader>
-        </div>
-        <div class="main-card-skeleton" style="padding: 16px; gap: 8px;">
-          <ngx-skeleton-loader style="display: flex; flex-direction: row; align-items: center;" [theme]="{ 'margin': '0', 'border-radius': '4px', height: '0.8rem', width: '12rem' }" ></ngx-skeleton-loader>
-          <ngx-skeleton-loader style="display: flex; flex-direction: row; align-items: center;" [theme]="{ 'margin': '0', 'border-radius': '4px', height: '1rem' }" ></ngx-skeleton-loader>
-          <ngx-skeleton-loader style="display: flex; flex-direction: row; align-items: center;" [theme]="{ 'margin': '0', 'border-radius': '4px', height: '0.8rem', width: '12rem' }" ></ngx-skeleton-loader>
-        </div>
-        <div class="main-card-skeleton" style="padding: 16px; gap: 8px;">
-          <ngx-skeleton-loader style="display: flex; flex-direction: row; align-items: center;" [theme]="{ 'margin': '0', 'border-radius': '4px', height: '0.8rem', width: '12rem' }" ></ngx-skeleton-loader>
-          <ngx-skeleton-loader style="display: flex; flex-direction: row; align-items: center;" [theme]="{ 'margin': '0', 'border-radius': '4px', height: '1rem' }" ></ngx-skeleton-loader>
-          <ngx-skeleton-loader style="display: flex; flex-direction: row; align-items: center;" [theme]="{ 'margin': '0', 'border-radius': '4px', height: '0.8rem', width: '12rem' }" ></ngx-skeleton-loader>
-        </div>
-        <div class="main-card-skeleton" style="padding: 16px; gap: 8px;">
-          <ngx-skeleton-loader style="display: flex; flex-direction: row; align-items: center;" [theme]="{ 'margin': '0', 'border-radius': '4px', height: '0.8rem', width: '12rem' }" ></ngx-skeleton-loader>
-          <ngx-skeleton-loader style="display: flex; flex-direction: row; align-items: center;" [theme]="{ 'margin': '0', 'border-radius': '4px', height: '1rem' }" ></ngx-skeleton-loader>
-          <ngx-skeleton-loader style="display: flex; flex-direction: row; align-items: center;" [theme]="{ 'margin': '0', 'border-radius': '4px', height: '0.8rem', width: '12rem' }" ></ngx-skeleton-loader>
+        <div *ngFor="let x of [1,2,3,4,5,6]" class="main-card-skeleton" style="padding: 16px; gap: 8px;">
+          <ngx-skeleton-loader class="skeleton-item" [theme]="{ 'margin': '0', 'border-radius': '4px', height: '0.8rem', width: '12rem' }" ></ngx-skeleton-loader>
+          <ngx-skeleton-loader class="skeleton-item" [theme]="{ 'margin': '0', 'border-radius': '4px', height: '1rem' }" ></ngx-skeleton-loader>
+          <ngx-skeleton-loader class="skeleton-item" [theme]="{ 'margin': '0', 'border-radius': '4px', height: '0.8rem', width: '12rem' }" ></ngx-skeleton-loader>
         </div>
       </ng-container>
 

diff --git a/src/app/ui/list/list.component.scss b/src/app/ui/list/list.component.scss
@@ -21,6 +21,12 @@
   border-width: 1px;
 }
 
+.skeleton-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 @media (min-width: 768px) {
   .main-container {
     display: flex;
@@ -37,6 +43,17 @@
   .main-card {
     width: calc(50% - 0.5rem - 1rem - 1rem);
   }
+
+  .main-card-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 0px;
+    width: calc(50% - 0.5rem - 1rem - 1rem);
+    border-radius: 4px;
+    border-color: #F2F2F2;
+    border-style: solid;
+    border-width: 1px;
+  }
 }
 
 .card-header {