From 3bf0467726a296a5b53dd35fd59651e4603486d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Thu, 23 Jan 2020 21:10:04 +0100
Subject: [PATCH] upload skeleton

---
 .../finanzer/FinanzerNavigation.vue           |  9 ++-
 .../finanzer/Skeleton/TableSkeleton.vue       | 57 +++++++++++++++++++
 2 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 src/components/finanzer/Skeleton/TableSkeleton.vue

diff --git a/src/components/finanzer/FinanzerNavigation.vue b/src/components/finanzer/FinanzerNavigation.vue
index ddd4c06..b8db030 100644
--- a/src/components/finanzer/FinanzerNavigation.vue
+++ b/src/components/finanzer/FinanzerNavigation.vue
@@ -17,8 +17,13 @@
     <v-divider />
     <v-list>
       <div v-for="user in users" v-bind:key="users.indexOf(user)">
-        <v-list-item :to="{ name: 'activeUser', params: { id: user.username } }" link>
-          <v-list-item-title>{{ user.lastname }}, {{ user.firstname }}</v-list-item-title>
+        <v-list-item
+          :to="{ name: 'activeUser', params: { id: user.username } }"
+          link
+        >
+          <v-list-item-title
+            >{{ user.lastname }}, {{ user.firstname }}</v-list-item-title
+          >
         </v-list-item>
       </div>
       <v-list-item>
diff --git a/src/components/finanzer/Skeleton/TableSkeleton.vue b/src/components/finanzer/Skeleton/TableSkeleton.vue
new file mode 100644
index 0000000..b3beac3
--- /dev/null
+++ b/src/components/finanzer/Skeleton/TableSkeleton.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <v-card style="margin-top: 3px">
+      <v-card-title>
+        <v-skeleton-loader type="heading" />
+      </v-card-title>
+      <v-skeleton-loader type="table-thead" />
+      <v-skeleton-loader type="table-row-divider@3" />
+      <v-container fluid>
+        <v-row align="start" align-content="start">
+          <v-col>
+            <v-row>
+              <v-col>
+                <v-skeleton-loader type="chip" />
+              </v-col>
+              <v-col>
+                <v-skeleton-loader type="chip" />
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>
+                <v-skeleton-loader type="chip"/>
+              </v-col>
+              <v-col>
+                <v-skeleton-loader type="chip" />
+              </v-col>
+            </v-row>
+          </v-col>
+          <v-col align-self="center">
+            <v-row>
+              <v-col>
+                <v-skeleton-loader type="chip" />
+              </v-col>
+              <v-col>
+                <v-skeleton-loader type="chip" />
+              </v-col>
+            </v-row>
+            <v-card outlined>
+              <v-row>
+                <v-skeleton-loader type="list-item" />
+                <v-spacer />
+              </v-row>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TableSkeleton'
+}
+</script>
+
+<style scoped></style>