optimize ui

src/views/mobile/users/SessionList.vue

@@ -2,7 +2,12 @@
     <f7-page>
         <f7-navbar :title="$t('Device & Sessions')" :back-link="$t('Back')"></f7-navbar>
 
-        <f7-list media-list>
+        <f7-list media-list class="skeleton-text" v-if="loading">
+            <f7-list-item title="Token Name" after="MM/DD/YYYY HH:mm:ss"
+                text="Mozilla/5.0 (OS Name & Version or Device Name; CPU Architecture ...) AppleWebKit/Version (KHTML, like Gecko) Software Name/Version Software Name/Version ..."></f7-list-item>
+        </f7-list>
+
+        <f7-list media-list v-else-if="!loading">
             <f7-list-item swipeout v-for="token in tokens" :key="token.tokenId" :id="token | tokenDomId" :title="token | tokenTitle | t" :after="token.createdAt | moment($t('format.datetime.long'))" :text="token.userAgent">
                 <f7-swipeout-actions right v-if="!token.isCurrent"  >
                     <f7-swipeout-button color="red" :text="$t('Log Out')" @click="revoke(token)"></f7-swipeout-button>
@@ -16,17 +21,18 @@
 export default {
     data() {
         return {
-            tokens: []
+            tokens: [],
+            loading: true
         };
     },
     created() {
         const self = this;
         const router = self.$f7router;
 
-        self.$showLoading();
+        self.loading = true;
 
         self.$services.getTokens().then(response => {
-            self.$hideLoading();
+            self.loading = false;
             const data = response.data;
 
             if (!data || !data.success || !data.result) {
@@ -38,7 +44,7 @@ export default {
 
             self.tokens = data.result;
         }).catch(error => {
-            self.$hideLoading();
+            self.loading = false;
 
             if (error.response && error.response.data && error.response.data.errorMessage) {
                 self.$alert({ error: error.response.data }, () => {