UPDATE placeholder effects

Author: RecuencoJones

src/foreground/pages/ContextOverview.vue

@@ -7,27 +7,27 @@
         <dl>
           <dt>{{ $t('sidebar.pods') }}</dt>
           <dd v-if="data">{{ data.pods }}</dd>
-          <dd v-else class="text-placeholder"></dd>
+          <dd v-else class="text-placeholder text-placeholder--short"></dd>
         </dl>
         <dl>
           <dt>{{ $t('sidebar.replicasets') }}</dt>
           <dd v-if="data">{{ data.replicasets }}</dd>
-          <dd v-else class="text-placeholder"></dd>
+          <dd v-else class="text-placeholder text-placeholder--short"></dd>
         </dl>
         <dl>
           <dt>{{ $t('sidebar.deployments') }}</dt>
           <dd v-if="data">{{ data.deployments }}</dd>
-          <dd v-else class="text-placeholder"></dd>
+          <dd v-else class="text-placeholder text-placeholder--short"></dd>
         </dl>
         <dl>
           <dt>{{ $t('sidebar.jobs') }}</dt>
           <dd v-if="data">{{ data.jobs }}</dd>
-          <dd v-else class="text-placeholder"></dd>
+          <dd v-else class="text-placeholder text-placeholder--short"></dd>
         </dl>
         <dl>
           <dt>{{ $t('sidebar.cronjobs') }}</dt>
           <dd v-if="data">{{ data.cronjobs }}</dd>
-          <dd v-else class="text-placeholder"></dd>
+          <dd v-else class="text-placeholder text-placeholder--short"></dd>
         </dl>
       </div>
     </section>
@@ -37,12 +37,12 @@
         <dl>
           <dt>{{ $t('sidebar.configmaps') }}</dt>
           <dd v-if="data">{{ data.configmaps }}</dd>
-          <dd v-else class="text-placeholder"></dd>
+          <dd v-else class="text-placeholder text-placeholder--short"></dd>
         </dl>
         <dl>
           <dt>{{ $t('sidebar.secrets') }}</dt>
           <dd v-if="data">{{ data.secrets }}</dd>
-          <dd v-else class="text-placeholder"></dd>
+          <dd v-else class="text-placeholder text-placeholder--short"></dd>
         </dl>
       </div>
     </section>
@@ -52,17 +52,17 @@
         <dl>
           <dt>{{ $t('sidebar.services') }}</dt>
           <dd v-if="data">{{ data.services }}</dd>
-          <dd v-else class="text-placeholder"></dd>
+          <dd v-else class="text-placeholder text-placeholder--short"></dd>
         </dl>
         <dl>
           <dt>{{ $t('sidebar.ingresses') }}</dt>
           <dd v-if="data">{{ data.ingresses }}</dd>
-          <dd v-else class="text-placeholder"></dd>
+          <dd v-else class="text-placeholder text-placeholder--short"></dd>
         </dl>
         <dl>
           <dt>{{ $t('sidebar.networkpolicies') }}</dt>
           <dd v-if="data">{{ data.networkpolicies }}</dd>
-          <dd v-else class="text-placeholder"></dd>
+          <dd v-else class="text-placeholder text-placeholder--short"></dd>
         </dl>
       </div>
     </section>
@@ -72,17 +72,17 @@
         <dl>
           <dt>{{ $t('sidebar.serviceaccounts') }}</dt>
           <dd v-if="data">{{ data.serviceaccounts }}</dd>
-          <dd v-else class="text-placeholder"></dd>
+          <dd v-else class="text-placeholder text-placeholder--short"></dd>
         </dl>
         <dl>
           <dt>{{ $t('sidebar.roles') }}</dt>
           <dd v-if="data">{{ data.roles }}</dd>
-          <dd v-else class="text-placeholder"></dd>
+          <dd v-else class="text-placeholder text-placeholder--short"></dd>
         </dl>
         <dl>
           <dt>{{ $t('sidebar.rolebindings') }}</dt>
           <dd v-if="data">{{ data.rolebindings }}</dd>
-          <dd v-else class="text-placeholder"></dd>
+          <dd v-else class="text-placeholder text-placeholder--short"></dd>
         </dl>
       </div>
     </section>

src/foreground/styles/defs.scss

@@ -33,6 +33,8 @@
   --color-modal-border: var(--color-chocolate);
   --color-box-shadow: var(--color-dark-cookie);
   --color-outline: var(--color-dark-cookie);
+  --color-loading-start: var(--color-light-cookie);
+  --color-loading-end: var(--color-cream);
 }
 
 .theme-kubernetes {
@@ -68,6 +70,8 @@
   --color-modal-border: var(--color-dark);
   --color-box-shadow: var(--color-dark);
   --color-outline: var(--color-blue);
+  --color-loading-start: var(--color-gray-lighter);
+  --color-loading-end: var(--color-blue);
 }
 
 .theme-cli {
@@ -101,6 +105,8 @@
   --color-modal-border: var(--color-font);
   --color-box-shadow: var(--color-font);
   --color-outline: var(--color-font);
+  --color-loading-start: var(--color-font);
+  --color-loading-end: var(--color-font);
 }
 
 .theme-plain {
@@ -134,6 +140,8 @@
   --color-modal-border: var(--color-dark);
   --color-box-shadow: var(--color-gray);
   --color-outline: var(--color-gray);
+  --color-loading-start: unset;
+  --color-loading-end: var(--color-gray);
 
   a {
     color: revert !important;
@@ -172,6 +180,8 @@
   --color-modal-border: var(--color-light);
   --color-box-shadow: var(--color-link);
   --color-outline: var(--color-link);
+  --color-loading-start: var(--color-link);
+  --color-loading-end: var(--color-light);
 
   a {
     color: var(--color-link);

src/foreground/styles/global.scss

@@ -122,47 +122,27 @@ dl {
 
 .text-placeholder {
   display: inline-block;
-  position: relative;
   width: 5rem;
   height: 1rem;
-  background: #ccc;
-
-  &::after {
-    animation: shine 1s ease-in-out infinite;
-    animation-fill-mode: forwards;
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
+  background: var(--color-loading-start, #cccccc);
+  animation: blink 1s ease-in-out infinite;
 
-    background: rgba(255, 255, 255, 0.13);
-    background: linear-gradient(
-      to right,
-      rgba(255, 255, 255, 0.13) 0%,
-      rgba(255, 255, 255, 0.13) 77%,
-      rgba(255, 255, 255, 0.5) 92%,
-      rgba(255, 255, 255, 0.0) 100%
-    );
+  &--short {
+    width: 1rem;
   }
 }
 
-@keyframes shine {
-  10% {
-    opacity: 1;
-    top: 0;
-    left: 100%;
-    transition-property: left, top, opacity;
-    transition-duration: 0.7s, 0.7s, 0.15s;
-    transition-timing-function: ease;
-  }
-  100% {
-    opacity: 0;
-    top: 0;
-    left: 3%;
-    transition-property: left, top, opacity;
+@keyframes blink {
+  from {
+    background-color: var(--color-loading-start, #cccccc);
+  }
+
+  50% {
+    background-color: var(--color-loading-end, #bdbdbd);
+  }
+
+  to {
+    background-color: var(--color-loading-start, #cccccc);
   }
 }