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 }, () => {

src/views/mobile/users/TwoFactorAuth.vue

@@ -2,13 +2,18 @@
     <f7-page>
         <f7-navbar :title="$t('Two-Factor Authentication')" :back-link="$t('Back')"></f7-navbar>
 
-        <f7-list v-if="status === true">
+        <f7-list v-if="loading" class="skeleton-text">
+            <f7-list-item title="Status" after="Unknwon"></f7-list-item>
+            <f7-list-button class="disabled">Operate</f7-list-button>
+        </f7-list>
+
+        <f7-list v-else-if="!loading && status === true">
             <f7-list-item :title="$t('Status')" :after="$t('Enabled')"></f7-list-item>
             <f7-list-button :class="{ 'disabled': regenerating }" @click="regenerateBackupCode(null)">{{ $t('Regenerate Backup Codes') }}</f7-list-button>
             <f7-list-button :class="{ 'disabled': disabling }" @click="disable(null)">{{ $t('Disable') }}</f7-list-button>
         </f7-list>
 
-        <f7-list v-else-if="status === false">
+        <f7-list v-else-if="!loading && status === false">
             <f7-list-item :title="$t('Status')" :after="$t('Disabled')"></f7-list-item>
             <f7-list-button :class="{ 'disabled': enabling }" @click="enable">{{ $t('Enable') }}</f7-list-button>
         </f7-list>
@@ -129,6 +134,7 @@ export default {
     data() {
         return {
             status: null,
+            loading: true,
             new2FASecret: '',
             new2FAQRCode: '',
             currentPasscodeForEnable: '',
@@ -149,10 +155,10 @@ export default {
         const self = this;
         const router = self.$f7router;
 
-        self.$showLoading();
+        self.loading = true;
 
         self.$services.get2FAStatus().then(response => {
-            self.$hideLoading();
+            self.loading = false;
             const data = response.data;
 
             if (!data || !data.success || !data.result || typeof(data.result.enable) !== 'boolean') {
@@ -164,7 +170,7 @@ export default {
 
             self.status = data.result.enable;
         }).catch(error => {
-            self.$hideLoading();
+            self.loading = false;
 
             if (error.response && error.response.data && error.response.data.errorMessage) {
                 self.$alert({ error: error.response.data }, () => {

src/views/mobile/users/UserProfile.vue

@@ -1,7 +1,15 @@
 <template>
     <f7-page>
         <f7-navbar :title="$t('User Profile')" :back-link="$t('Back')"></f7-navbar>
-        <f7-list no-hairlines-md>
+
+        <f7-list no-hairlines-md class="skeleton-text" v-if="loading">
+            <f7-list-input label="Password" placeholder="Your password"></f7-list-input>
+            <f7-list-input label="Confirmation Password" placeholder="Re-enter the password"></f7-list-input>
+            <f7-list-input label="E-mail" placeholder="Your email address"></f7-list-input>
+            <f7-list-input label="Nickname" placeholder="Your nickname"></f7-list-input>
+        </f7-list>
+
+        <f7-list no-hairlines-md v-else-if="!loading">
             <f7-list-input
                 type="password"
                 clear-button
@@ -81,6 +89,7 @@ export default {
             email: '',
             oldNickname: '',
             nickname: '',
+            loading: true,
             updating: false,
             showInputPasswordSheet: false
         };
@@ -117,10 +126,10 @@ export default {
         const self = this;
         const router = self.$f7router;
 
-        self.$showLoading();
+        self.loading = true;
 
         self.$services.getProfile().then(response => {
-            self.$hideLoading();
+            self.loading = false;
             const data = response.data;
 
             if (!data || !data.success || !data.result) {
@@ -136,7 +145,7 @@ export default {
             self.email = self.oldEmail
             self.nickname = self.oldNickname;
         }).catch(error => {
-            self.$hideLoading();
+            self.loading = false;
 
             if (error.response && error.response.data && error.response.data.errorMessage) {
                 self.$alert({ error: error.response.data }, () => {