From 5890a0280769aea22e0694048a83134f2a7dfe8b Mon Sep 17 00:00:00 2001 From: winkidney Date: Thu, 28 Nov 2019 23:38:50 +0800 Subject: [PATCH] Feature: Add loading spinner for pins --- pinry-spa/src/assets/loader.gif | Bin 0 -> 2608 bytes pinry-spa/src/components/Pins.vue | 30 ++++++++++++++++++++------- pinry-spa/src/components/loadingSpinner.vue | 31 ++++++++++++++++++++++++++++ pinry/static/img/loader.gif | Bin 2608 -> 0 bytes 4 files changed, 54 insertions(+), 7 deletions(-) create mode 100644 pinry-spa/src/assets/loader.gif create mode 100644 pinry-spa/src/components/loadingSpinner.vue delete mode 100644 pinry/static/img/loader.gif diff --git a/pinry-spa/src/assets/loader.gif b/pinry-spa/src/assets/loader.gif new file mode 100644 index 0000000000000000000000000000000000000000..c69e937232b24ea30f01c68bbd2ebc798dcecfcb GIT binary patch literal 2608 zcmdVcdr(tX9tZGC9yiG~=H_*Q-0%n(kWqP*D#hw{AQu8;1%gl-Hrf&{2?48KX;hHy z3Ze*zEz4t3XdUFyLbNPUYlA`|B}P=N1fqtL1*}S;87#|-W9v<#G;ul(e%d3)N(^9c$d2Dz{7}?ErjNd;{EMKkCsk21~b9Gvg zDo<7L=3Z5HNbVlZUcm1eg#o#CZCJU`3IYHwM->zCd?uYrF3vKFeM}v?f+%s?E>ly|3W25ry9#NNbTx-}0ON58dTrs^ix{_1O0Wh~SVSBlH)Ajn zPn^Gbjz}PCtN@#keR&hK&Dhl-b$kZ8^S)x#dh0{7X=X%CCJk7P1PSO>T&S8I4{#Lg zb5#)o=;!ZP*1nM{cI4@(x7o27*SA()NHmrn67aN@Pmi~(i_SnrjYnwh36aG%!@i0d zqbvfa44f|?OG4ntP|nbjhEl1)Yp6ZN@yjy zy4==QmLy%t;ps3R?~f2KfTTI|2?q8dFd6^z5GF+Xa&Y)sjG)hxit80pPcOP zJ z*LW{SyGHD%hUotV+W%I}fBLAIx!8|7#}$;clKQ+{&FjDqGQ2ZNx(lYM3*%~}ILnao zM`aui55~ZFJlu^!5rdA9Q_7H68H_;##u{x(Yn-vSfIRCb^Nqsg zGRS!Egm>h+o<}LeV4&CLReo9FrDjDvs}8?JwC)#Qs|ie=r?~xUh)&*d`Fx>FG}%X# zNdtDHBKhLPC0wpooFDAQKL%*6T|ULH$=wX!NhcasgD3d;-d$I6yRK3yN+E~C1335_iLOt+*9uvSZ`>*KA}vm}08wRq=>5l|t*Na&jR z-C1&C`nkEk#sB|@yyt-#fXngP04My zm7u$Q%EJbHp`>~`5W&L{W!6`y&}LMS;jfUpgO~7TLVMRZ9IC)IZp0A${`yp0{&wco z#1nx@XMkhqeK%7?RE7JdLr1^nwFfaJ0Q&Lv?WNJ%9}VSJsNY2+UYs2%EU0J~ayFXv zi*?7KCXQHkD)O6!0Q%4N+HTODHxJ{kQSuQX$l-rSwkwh(zMkdfzxyGwl@yHC)C4p< z&n2%8#M?)Q@mgHL1ot8`SFdSEj9ye|jHy+U8#@HoUExG=@AVkRAe_qYm4EpzK6L*& zh`)26?V#f4#_h^P9G^%>h2-H3)$QP zQovu6J9qDvsxqweDdNNa!Lb?L4_UF{tLX_nN7r0U_vF14YKcGR-*Gl} zx3oG)bzf|65dBxD-;2ZCp??K;+TuQ9onnK?==5hzbkb^r_g>z4#D8mcv8(+XdoszA zCx-qhdgxMNMotj}SiL_6V(tLcsK7(M(r(%u<}QrVfOvyK6_;~NOTlPGfX@M7S5YQF z&*$(ylJMHJt^_aQeu{C6NaTE$G3HNN@_SnN8YcaKn%`)F@~L1x+ah7-gEJPpc6w%3 zyX}r+Qk$4RHZzfH){e~F*qJ{d*L8a6n4;U?+{de0-t)mal#TVxe)3F}^UBh+zd T)6_**#cgp_+?JL9(ew3BlNF>u literal 0 HcmV?d00001 diff --git a/pinry-spa/src/components/Pins.vue b/pinry-spa/src/components/Pins.vue index f78bbbb..24d6e62 100644 --- a/pinry-spa/src/components/Pins.vue +++ b/pinry-spa/src/components/Pins.vue @@ -50,6 +50,7 @@ + @@ -58,6 +59,7 @@ import API from './api'; import pinHandler from './utils/PinHandler'; import PinPreview from './PinPreview.vue'; +import loadingSpinner from './loadingSpinner.vue'; function createImageItem(pin) { const image = {}; @@ -74,11 +76,17 @@ function createImageItem(pin) { export default { name: 'pins', - components: {}, + components: { + loadingSpinner, + }, data() { return { blocks: [], - offset: 0, + status: { + loading: false, + hasNext: true, + offset: 0, + }, }; }, props: { @@ -117,26 +125,34 @@ export default { }, ); }, - fetchMore() { + fetchMore(created) { let promise; + if (!created) { + if (this.status.loading) { + return; + } + } + this.status.loading = true; if (this.pinFilters.tagFilter) { - promise = API.fetchPins(this.offset, this.pinFilters.tagFilter); + promise = API.fetchPins(this.status.offset, this.pinFilters.tagFilter); } else if (this.pinFilters.userFilter) { - promise = API.fetchPins(this.offset, null, this.pinFilters.userFilter); + promise = API.fetchPins(this.status.offset, null, this.pinFilters.userFilter); } else if (this.pinFilters.boardFilter) { promise = API.fetchPinsForBoard(this.pinFilters.boardFilter); } else { - promise = API.fetchPins(this.offset); + promise = API.fetchPins(this.status.offset); } promise.then( (resp) => { this.blocks = this.buildBlocks(resp.data.results); + this.status.loading = false; }, + () => { this.status.loading = false; }, ); }, }, created() { - this.fetchMore(); + this.fetchMore(true); }, }; diff --git a/pinry-spa/src/components/loadingSpinner.vue b/pinry-spa/src/components/loadingSpinner.vue new file mode 100644 index 0000000..00e02b1 --- /dev/null +++ b/pinry-spa/src/components/loadingSpinner.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/pinry/static/img/loader.gif b/pinry/static/img/loader.gif deleted file mode 100644 index c69e937232b24ea30f01c68bbd2ebc798dcecfcb..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2608 zcmdVcdr(tX9tZGC9yiG~=H_*Q-0%n(kWqP*D#hw{AQu8;1%gl-Hrf&{2?48KX;hHy z3Ze*zEz4t3XdUFyLbNPUYlA`|B}P=N1fqtL1*}S;87#|-W9v<#G;ul(e%d3)N(^9c$d2Dz{7}?ErjNd;{EMKkCsk21~b9Gvg zDo<7L=3Z5HNbVlZUcm1eg#o#CZCJU`3IYHwM->zCd?uYrF3vKFeM}v?f+%s?E>ly|3W25ry9#NNbTx-}0ON58dTrs^ix{_1O0Wh~SVSBlH)Ajn zPn^Gbjz}PCtN@#keR&hK&Dhl-b$kZ8^S)x#dh0{7X=X%CCJk7P1PSO>T&S8I4{#Lg zb5#)o=;!ZP*1nM{cI4@(x7o27*SA()NHmrn67aN@Pmi~(i_SnrjYnwh36aG%!@i0d zqbvfa44f|?OG4ntP|nbjhEl1)Yp6ZN@yjy zy4==QmLy%t;ps3R?~f2KfTTI|2?q8dFd6^z5GF+Xa&Y)sjG)hxit80pPcOP zJ z*LW{SyGHD%hUotV+W%I}fBLAIx!8|7#}$;clKQ+{&FjDqGQ2ZNx(lYM3*%~}ILnao zM`aui55~ZFJlu^!5rdA9Q_7H68H_;##u{x(Yn-vSfIRCb^Nqsg zGRS!Egm>h+o<}LeV4&CLReo9FrDjDvs}8?JwC)#Qs|ie=r?~xUh)&*d`Fx>FG}%X# zNdtDHBKhLPC0wpooFDAQKL%*6T|ULH$=wX!NhcasgD3d;-d$I6yRK3yN+E~C1335_iLOt+*9uvSZ`>*KA}vm}08wRq=>5l|t*Na&jR z-C1&C`nkEk#sB|@yyt-#fXngP04My zm7u$Q%EJbHp`>~`5W&L{W!6`y&}LMS;jfUpgO~7TLVMRZ9IC)IZp0A${`yp0{&wco z#1nx@XMkhqeK%7?RE7JdLr1^nwFfaJ0Q&Lv?WNJ%9}VSJsNY2+UYs2%EU0J~ayFXv zi*?7KCXQHkD)O6!0Q%4N+HTODHxJ{kQSuQX$l-rSwkwh(zMkdfzxyGwl@yHC)C4p< z&n2%8#M?)Q@mgHL1ot8`SFdSEj9ye|jHy+U8#@HoUExG=@AVkRAe_qYm4EpzK6L*& zh`)26?V#f4#_h^P9G^%>h2-H3)$QP zQovu6J9qDvsxqweDdNNa!Lb?L4_UF{tLX_nN7r0U_vF14YKcGR-*Gl} zx3oG)bzf|65dBxD-;2ZCp??K;+TuQ9onnK?==5hzbkb^r_g>z4#D8mcv8(+XdoszA zCx-qhdgxMNMotj}SiL_6V(tLcsK7(M(r(%u<}QrVfOvyK6_;~NOTlPGfX@M7S5YQF z&*$(ylJMHJt^_aQeu{C6NaTE$G3HNN@_SnN8YcaKn%`)F@~L1x+ah7-gEJPpc6w%3 zyX}r+Qk$4RHZzfH){e~F*qJ{d*L8a6n4;U?+{de0-t)mal#TVxe)3F}^UBh+zd T)6_**#cgp_+?JL9(ew3BlNF>u