From 227798300fd4ee7e676c4662b3b10ce9aba4d109 Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Mon, 3 Dec 2018 23:14:10 +0900
Subject: [PATCH] Improve widget paging looks (#3482)

* Improve widget paging looks

* rewind when error
---
 src/client/app/desktop/views/widgets/polls.vue | 12 +++++++++++-
 src/client/app/desktop/views/widgets/users.vue | 13 ++++++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/client/app/desktop/views/widgets/polls.vue b/src/client/app/desktop/views/widgets/polls.vue
index 5d7bc9c009..fb2e019e37 100644
--- a/src/client/app/desktop/views/widgets/polls.vue
+++ b/src/client/app/desktop/views/widgets/polls.vue
@@ -2,7 +2,10 @@
 <div class="mkw-polls">
 	<mk-widget-container :show-header="!props.compact">
 		<template slot="header"><fa icon="chart-pie"/>{{ $t('title') }}</template>
-		<button slot="func" :title="$t('title')" @click="fetch"><fa icon="sync"/></button>
+		<button slot="func" :title="$t('title')" @click="fetch">
+			<fa v-if="!fetching &&  more" icon="arrow-right"/>
+			<fa v-if="!fetching && !more" icon="sync"/>
+		</button> 
 
 		<div class="mkw-polls--body">
 			<div class="poll" v-if="!fetching && poll != null">
@@ -32,6 +35,7 @@ export default define({
 		return {
 			poll: null,
 			fetching: true,
+			more: true,
 			offset: 0
 		};
 	},
@@ -53,12 +57,18 @@ export default define({
 			}).then(notes => {
 				const poll = notes ? notes[0] : null;
 				if (poll == null) {
+					this.more = false;
 					this.offset = 0;
 				} else {
+					this.more = true;
 					this.offset++;
 				}
 				this.poll = poll;
 				this.fetching = false;
+			}).catch(() => {
+				this.poll = null;
+				this.fetching = false;
+				this.more = false;
 			});
 		}
 	}
diff --git a/src/client/app/desktop/views/widgets/users.vue b/src/client/app/desktop/views/widgets/users.vue
index 2c42e35a8b..7890b6df04 100644
--- a/src/client/app/desktop/views/widgets/users.vue
+++ b/src/client/app/desktop/views/widgets/users.vue
@@ -2,7 +2,10 @@
 <div class="mkw-users">
 	<mk-widget-container :show-header="!props.compact">
 		<template slot="header"><fa icon="users"/>{{ $t('title') }}</template>
-		<button slot="func" :title="$t('title')" @click="refresh"><fa icon="sync"/></button>
+		<button slot="func" :title="$t('title')" @click="refresh">
+			<fa v-if="!fetching &&  more" icon="arrow-right"/>
+			<fa v-if="!fetching && !more" icon="sync"/>
+		</button>
 
 		<div class="mkw-users--body">
 			<p class="fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
@@ -38,6 +41,7 @@ export default define({
 		return {
 			users: [],
 			fetching: true,
+			more: true,
 			page: 0
 		};
 	},
@@ -59,12 +63,19 @@ export default define({
 			}).then(users => {
 				this.users = users;
 				this.fetching = false;
+			}).catch(() => {
+				this.users = [];
+				this.fetching = false;
+				this.more = false;
+				this.page = 0;
 			});
 		},
 		refresh() {
 			if (this.users.length < limit) {
+				this.more = false;
 				this.page = 0;
 			} else {
+				this.more = true;
 				this.page++;
 			}
 			this.fetch();