From a54a37be6a09e45630b5b4bf1b494481a9e64657 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 2 Nov 2022 14:02:16 +0100
Subject: [PATCH] add skeleton system

---
 frontend/src/components/Menu/SidebarNew.vue |  6 +--
 frontend/src/layouts/DashboardLayout.vue    | 54 ++++++++++++++++++++-
 frontend/src/locales/de.json                |  8 ++-
 frontend/src/locales/en.json                |  8 ++-
 frontend/src/pages/Favourites.vue           | 22 ++++++++-
 frontend/src/pages/Settings.vue             | 22 ++++++++-
 frontend/src/pages/TopStorys.vue            | 22 ++++++++-
 7 files changed, 130 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/Menu/SidebarNew.vue b/frontend/src/components/Menu/SidebarNew.vue
index bc2e644ac..4039c0889 100644
--- a/frontend/src/components/Menu/SidebarNew.vue
+++ b/frontend/src/components/Menu/SidebarNew.vue
@@ -10,7 +10,7 @@
           </b-nav-item>
           <b-nav-item to="/storys" class="mb-3">
             <b-icon icon="card-heading" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.top_stories') }}</span>
+            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.topStories') }}</span>
           </b-nav-item>
           <b-nav-item to="/favourites" class="mb-3">
             <b-icon icon="bookmark" aria-hidden="true"></b-icon>
@@ -46,8 +46,8 @@
             <b-icon :icon="lightmode ? 'toggle-on' : 'toggle-off'" aria-hidden="true"></b-icon>
             <span class="d-none d-lg-inline ml-2">{{ $t('navigation.lightmode') }}</span>
             <label for="checkbox" class="switch-label">
-              <span v-if="lightmode">🌙</span>
-              <span v-else>☀️</span>
+              <span v-if="lightmode">{{ $t('navigation.moon') }}</span>
+              <span v-else>{{ $t('navigation.sun') }}</span>
             </label>
           </b-nav-item>
           <b-nav-item to="/settings" class="mb-3">
diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index b42a890f4..571d54e8e 100755
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -1,6 +1,47 @@
 <template>
-  <div class="main-page bg-default">
-    <div class="position-absolute w-100 h-100 bg-default">
+  <div class="main-page bg-default h-100">
+    <div v-if="skeleton">
+      <b-row class="text-center">
+        <b-col>
+          <b-skeleton-img no-aspect animation="wave" height="118px"></b-skeleton-img>
+        </b-col>
+        <b-col cols="6">
+          <b-skeleton animation="wave" class="mt-4 pt-5"></b-skeleton>
+        </b-col>
+        <b-col>
+          <div class="b-right m-4">
+            <b-row>
+              <b-col><b-skeleton type="avatar"></b-skeleton></b-col>
+              <b-col>
+                <b-skeleton></b-skeleton>
+                <b-skeleton></b-skeleton>
+              </b-col>
+            </b-row>
+          </div>
+        </b-col>
+      </b-row>
+      <b-row class="text-center mt-5">
+        <b-col>
+          <b-skeleton animation="wave" width="85%"></b-skeleton>
+          <b-skeleton animation="wave" width="55%"></b-skeleton>
+          <b-skeleton animation="wave" width="70%"></b-skeleton>
+        </b-col>
+        <b-col cols="6">
+          <b-skeleton animation="wave" width="85%"></b-skeleton>
+          <b-skeleton animation="wave" width="55%"></b-skeleton>
+          <b-skeleton animation="wave" width="70%"></b-skeleton>
+          <b-skeleton animation="wave" width="85%"></b-skeleton>
+          <b-skeleton animation="wave" width="55%"></b-skeleton>
+          <b-skeleton animation="wave" width="70%"></b-skeleton>
+        </b-col>
+        <b-col>
+          <b-skeleton animation="wave" width="85%"></b-skeleton>
+          <b-skeleton animation="wave" width="55%"></b-skeleton>
+          <b-skeleton animation="wave" width="70%"></b-skeleton>
+        </b-col>
+      </b-row>
+    </div>
+    <div v-else class="position-absolute w-100 h-100 bg-default">
       <!--<navbar
         class="main-navbar"
         :balance="balance"
@@ -125,6 +166,7 @@ export default {
       tunneledEmail: null,
       hamburger: true,
       darkMode: false,
+      skeleton: true,
     }
   },
   provide() {
@@ -132,6 +174,11 @@ export default {
       getTunneledEmail: () => this.tunneledEmail,
     }
   },
+  created() {
+    setTimeout(() => {
+      this.skeleton = false
+    }, 1500)
+  },
   methods: {
     async logout() {
       this.$apollo
@@ -221,6 +268,9 @@ export default {
 }
 </script>
 <style>
+.b-right {
+  text-align: -webkit-right;
+}
 .content-gradido {
   display: inline-flex;
   width: 100%;
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 78632dee4..08780e4de 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -239,9 +239,13 @@
     "send": "Senden",
     "settings": "Einstellung",
     "support": "Support",
-    "top_stories": "Top Stories",
-    "transactions": "Transaktionen"
+    "topStories": "Top Stories",
+    "transactions": "Transaktionen",
+    "moon":"🌙",
+    "sun":"☀️"
   },
+  "favourites": "Favouriten",
+  "topStorys":"Beiträge",
   "qrCode": "QR Code",
   "send_gdd": "GDD versenden",
   "send_per_link": "GDD versenden per Link",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 8451d7eae..5dfada32a 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -239,9 +239,13 @@
     "send": "Send",
     "settings": "Settings",
     "support": "Support",
-    "top_stories": "Top Stories",
-    "transactions": "Transactions"
+    "topStories": "Top Stories",
+    "transactions": "Transactions",
+    "moon":"🌙",
+    "sun":"☀️"
   },
+  "favourites": "Favourites",
+  "topStorys":"Top Storys",
   "qrCode": "QR Code",
   "send_gdd": "GDD send",
   "send_per_link": "GDD send via link",
diff --git a/frontend/src/pages/Favourites.vue b/frontend/src/pages/Favourites.vue
index 7fb83b78d..483dd7fe4 100644
--- a/frontend/src/pages/Favourites.vue
+++ b/frontend/src/pages/Favourites.vue
@@ -1,8 +1,28 @@
 <template>
-  <div>Favourites.vue</div>
+  <div>
+    <b-card v-if="skeleton">
+      {{ $t('favourites') }}
+      <b-skeleton animation="wave" width="85%"></b-skeleton>
+      <b-skeleton animation="wave" width="55%"></b-skeleton>
+      <b-skeleton animation="wave" width="70%"></b-skeleton>
+    </b-card>
+    <b-card v-else>
+      {{ $t('favourites') }}
+    </b-card>
+  </div>
 </template>
 <script>
 export default {
   name: 'Favourites',
+  data() {
+    return {
+      skeleton: true,
+    }
+  },
+  created() {
+    setTimeout(() => {
+      this.skeleton = false
+    }, 1500)
+  },
 }
 </script>
diff --git a/frontend/src/pages/Settings.vue b/frontend/src/pages/Settings.vue
index cadfdce63..8699f5e7c 100644
--- a/frontend/src/pages/Settings.vue
+++ b/frontend/src/pages/Settings.vue
@@ -1,8 +1,28 @@
 <template>
-  <div>Settings.vue</div>
+  <div>
+    <b-card v-if="skeleton">
+      {{ $t('navigation.settings') }}
+      <b-skeleton animation="wave" width="85%"></b-skeleton>
+      <b-skeleton animation="wave" width="55%"></b-skeleton>
+      <b-skeleton animation="wave" width="70%"></b-skeleton>
+    </b-card>
+    <b-card v-else>
+      {{ $t('navigation.settings') }}
+    </b-card>
+  </div>
 </template>
 <script>
 export default {
   name: 'Settings',
+  data() {
+    return {
+      skeleton: true,
+    }
+  },
+  created() {
+    setTimeout(() => {
+      this.skeleton = false
+    }, 1500)
+  },
 }
 </script>
diff --git a/frontend/src/pages/TopStorys.vue b/frontend/src/pages/TopStorys.vue
index 27b416724..290b7ee99 100644
--- a/frontend/src/pages/TopStorys.vue
+++ b/frontend/src/pages/TopStorys.vue
@@ -1,8 +1,28 @@
 <template>
-  <div>Top Storys</div>
+  <div>
+    <b-card v-if="skeleton">
+      {{ $t('navigation.topStories') }}
+      <b-skeleton animation="wave" width="85%"></b-skeleton>
+      <b-skeleton animation="wave" width="55%"></b-skeleton>
+      <b-skeleton animation="wave" width="70%"></b-skeleton>
+    </b-card>
+    <b-card v-else>
+      {{ $t('navigation.topStories') }}
+    </b-card>
+  </div>
 </template>
 <script>
 export default {
   name: 'TopStorys',
+  data() {
+    return {
+      skeleton: true,
+    }
+  },
+  created() {
+    setTimeout(() => {
+      this.skeleton = false
+    }, 1500)
+  },
 }
 </script>