improve

src/app/pages/gabinete-digital/gabinete-digital.page.html

@@ -35,7 +35,8 @@
           <!-- This is the list view -->
 
           <div *ngSwitchCase="'listview'">
-            <ion-item-sliding>
+
+            <ion-item-sliding *ngIf="loadCount">
               <div class="listview" >
                 <ion-list *ngIf="allProcessesList">
                   <div
@@ -87,6 +88,46 @@
                 </ion-list>
               </div>
             </ion-item-sliding>
+
+
+            <ion-item-sliding  *ngIf="!loadCount" class="width-100">
+                <ion-item lines="none"
+                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+
+                    <div class="item-content flex-grow-1 cursor-pointer">
+                      <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
+                      <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
+                      <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
+                    </div>
+                  </ion-item>
+                  <ion-item lines="none"
+                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+
+                    <div class="item-content flex-grow-1 cursor-pointer">
+                      <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
+                      <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
+                      <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
+                    </div>
+                  </ion-item>
+                  <ion-item lines="none"
+                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+
+                    <div class="item-content flex-grow-1 cursor-pointer">
+                      <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
+                      <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
+                      <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
+                    </div>
+                  </ion-item>
+                  <ion-item lines="none"
+                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+
+                    <div class="item-content flex-grow-1 cursor-pointer">
+                      <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
+                      <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
+                      <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
+                    </div>
+                  </ion-item>
+              </ion-item-sliding>
           </div>
 
           <!-- This is the box view -->
@@ -251,7 +292,7 @@
               
               <ion-item-sliding  class="width-100">
                 <ion-item lines="none"
-                  class="item width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
 
                     <div class="item-content flex-grow-1 cursor-pointer">
                       <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
@@ -260,7 +301,7 @@
                     </div>
                   </ion-item>
                   <ion-item lines="none"
-                  class="item width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
 
                     <div class="item-content flex-grow-1 cursor-pointer">
                       <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
@@ -269,7 +310,7 @@
                     </div>
                   </ion-item>
                   <ion-item lines="none"
-                  class="item width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
 
                     <div class="item-content flex-grow-1 cursor-pointer">
                       <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
@@ -278,7 +319,7 @@
                     </div>
                   </ion-item>
                   <ion-item lines="none"
-                  class="item width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
 
                     <div class="item-content flex-grow-1 cursor-pointer">
                       <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
@@ -289,7 +330,7 @@
               </ion-item-sliding>
               <ion-item-sliding  class="width-100">
                 <ion-item lines="none"
-                  class="item width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
 
                     <div class="item-content flex-grow-1 cursor-pointer">
                       <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
@@ -298,7 +339,7 @@
                     </div>
                   </ion-item>
                   <ion-item lines="none"
-                  class="item width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
 
                     <div class="item-content flex-grow-1 cursor-pointer">
                       <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
@@ -307,7 +348,7 @@
                     </div>
                   </ion-item>
                   <ion-item lines="none"
-                  class="item width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
 
                     <div class="item-content flex-grow-1 cursor-pointer">
                       <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
@@ -316,7 +357,7 @@
                     </div>
                   </ion-item>
                   <ion-item lines="none"
-                  class="item width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
 
                     <div class="item-content flex-grow-1 cursor-pointer">
                       <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>

src/app/pages/gabinete-digital/gabinete-digital.page.scss

@@ -62,7 +62,7 @@ ion-content{
      border-radius: 20px;
    }
    ion-item{
-     --ion-background-color:#dae3f3;
+     --ion-background-color:#ffffff;
      margin-bottom: 10px;
      border-radius: 5px;
    }
@@ -156,7 +156,7 @@ ion-content{
        background:  white;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
        width: 360px;
-       margin: 7px 20px;
+       margin: 7px;
        border-radius: 15px;
        padding: 7px;
        border:1px solid white;
@@ -440,7 +440,7 @@ ion-content{
        }
        .exp-card-long{
          //display: none;
-         width: 100% !important;
+         width: 93% !important;
          cursor: pointer;
          user-select: none;
          background:  white;
@@ -600,4 +600,75 @@ ion-content{
    color: white !important;
    fill: red !important;
  }
- 
+ 
+
+.item-skeleton{
+  width: 100% !important;
+  padding: 0px 20px 0 20px !important;
+  border-bottom: 1px solid #ebebeb;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  background-color: transparent;
+  overflow: auto;
+
+  .item-icon{
+    //margin-top: 28px;
+    width: 45px;
+    float: left;
+    font-size: 40px;
+
+    .item-icon ion-icon{
+      color: #061b52;
+    }
+  }
+  .item-icon2{
+    //margin-top: 23px;
+    width: 45px;
+    float: left;
+    font-size: 40px;
+  }
+
+  .item-content{
+    width: 100%;
+    padding: 15px 0 15px 10px;
+    overflow: auto;
+    margin-right: 5px;
+
+    p{
+      white-space: nowrap;
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+    }
+
+    .item-content-date{
+      color: #797979;
+      font-size: 13px;
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+    .item-content-title{
+      color: var(--title-text-color);
+      font-size: 15px;
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+    .item-content-detail{
+      color: #000000;
+      font-size: 13px;
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+    .item-options{
+      color: var(--box-hover-background-color);
+      width: 25px;
+      font-size: 20px;
+    }
+    .item-content-date-active, .item-content-title-active, .item-content-detail-active{
+      color: #fff;
+    }
+  }
+  .item-options-active{
+    display: none !important;
+  }
+}