diff --git a/client/package.json b/client/package.json index 6590c3d..89c189b 100644 --- a/client/package.json +++ b/client/package.json @@ -16,6 +16,7 @@ "@vue/cli-service": "^4.0.5", "axios": "^0.20.0", "node-sass": "^4.13.0", + "nprogress": "^0.2.0", "register-service-worker": "^1.0.0", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-vue": "^6.0.0-beta.10", diff --git a/client/src/scss/main.scss b/client/src/scss/main.scss index bf892e9..a77bb68 100644 --- a/client/src/scss/main.scss +++ b/client/src/scss/main.scss @@ -1,4 +1,5 @@ @import "_variables"; +@import "./progress"; * { box-sizing: border-box; diff --git a/client/src/scss/progress.scss b/client/src/scss/progress.scss new file mode 100644 index 0000000..3a6a3b7 --- /dev/null +++ b/client/src/scss/progress.scss @@ -0,0 +1,76 @@ +@import "_variables"; + +/* Make clicks pass-through */ +#nprogress { + pointer-events: none; +} + +#nprogress .bar { + background: $orange-darken; + + position: fixed; + z-index: 1031; + top: 0; + left: 0; + + width: 100%; + height: 2px; +} + +/* Fancy blur effect */ +#nprogress .peg { + display: block; + position: absolute; + right: 0px; + width: 100px; + height: 100%; + box-shadow: 0 0 10px $orange-darken, 0 0 5px $orange-darken; + opacity: 1.0; + + -webkit-transform: rotate(3deg) translate(0px, -4px); + -ms-transform: rotate(3deg) translate(0px, -4px); + transform: rotate(3deg) translate(0px, -4px); +} + +/* Remove these to get rid of the spinner */ +#nprogress .spinner { + display: block; + position: fixed; + z-index: 1031; + top: 15px; + right: 15px; +} + +#nprogress .spinner-icon { + width: 18px; + height: 18px; + box-sizing: border-box; + + border: solid 2px transparent; + border-top-color: $orange-darken; + border-left-color: $orange-darken; + border-radius: 50%; + + -webkit-animation: nprogress-spinner 400ms linear infinite; + animation: nprogress-spinner 400ms linear infinite; +} + +.nprogress-custom-parent { + overflow: hidden; + position: relative; +} + +.nprogress-custom-parent #nprogress .spinner, +.nprogress-custom-parent #nprogress .bar { + position: absolute; +} + +@-webkit-keyframes nprogress-spinner { + 0% { -webkit-transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); } +} +@keyframes nprogress-spinner { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + diff --git a/client/src/views/Search.vue b/client/src/views/Search.vue index 8e2df12..42f52d4 100644 --- a/client/src/views/Search.vue +++ b/client/src/views/Search.vue @@ -387,6 +387,7 @@ import VueTagsInput from '@johmun/vue-tags-input' import Pagination from '../components/Pagination.vue' import { VideosSearchQuery, VideoChannelsSearchQuery, ResultList } from '../../../PeerTube/shared/models' + import Nprogress from 'nprogress' export default Vue.extend({ components: { @@ -601,29 +602,39 @@ this.results = [] - const [ videosResult, channelsResult ] = await Promise.all([ - this.searchVideos(), - this.searchChannels() - ]) + Nprogress.start() - this.channelsCount = channelsResult.total - this.videosCount = videosResult.total + try { + const [ videosResult, channelsResult ] = await Promise.all([ + this.searchVideos(), + this.searchChannels() + ]) - this.resultsCount = videosResult.total + channelsResult.total - this.results = channelsResult.data.concat(videosResult.data) + Nprogress.done() - if (this.formSort === '-match') { - this.results.sort((r1, r2) => { - if (r1.score < r2.score) return 1 - else if (r1.score === r2.score) return 0 + this.channelsCount = channelsResult.total + this.videosCount = videosResult.total - return -1 - }) + this.resultsCount = videosResult.total + channelsResult.total + this.results = channelsResult.data.concat(videosResult.data) + + if (this.formSort === '-match') { + this.results.sort((r1, r2) => { + if (r1.score < r2.score) return 1 + else if (r1.score === r2.score) return 0 + + return -1 + }) + } + + this.buildPages() + this.searchDone = true + this.searchedTerm = this.formSearch + } catch (err) { + console.error('Cannot do search.', err) + } finally { + Nprogress.done() } - - this.buildPages() - this.searchDone = true - this.searchedTerm = this.formSearch }, isVideo (result: EnhancedVideo | EnhancedVideoChannel) { diff --git a/client/yarn.lock b/client/yarn.lock index 413d2a1..871188c 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -4768,6 +4768,11 @@ npm-run-path@^4.0.0: gauge "~2.7.3" set-blocking "~2.0.0" +nprogress@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1" + integrity sha1-y480xTIT2JVyP8urkH6UIq28r7E= + nth-check@^1.0.2, nth-check@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"