sonot
/
PteroTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show loading indicator when searching

This commit is contained in:
Dane Everitt 2018-09-11 21:32:01 -07:00
parent 0b0b80dc6d
commit 31092df5df
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
3 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
resources/assets/scripts/components/core/Navigation.vue
View File

@ -7,28 +7,42 @@
</div> </div>
<div class="search-box flex-none" v-if="$route.name !== 'dashboard'"> <div class="search-box flex-none" v-if="$route.name !== 'dashboard'">
<input type="text" class="search-input" id="searchInput" placeholder="Search..." <input type="text" class="search-input" id="searchInput" placeholder="Search..."
:class="{ 'has-search-results': servers.length > 0 && searchActive }" :class="{ 'has-search-results': (servers.length > 0 || loadingResults) && searchActive }"
v-on:focus="searchActive = true" v-on:focus="searchActive = true"
v-on:blur="searchActive = false" v-on:blur="searchActive = false"
v-on:input="search" v-on:input="search"
v-model="searchTerm" v-model="searchTerm"
/> />
<div class="search-results select-none" :class="{ 'hidden': servers.length === 0 || !searchActive }"> <div class="search-results select-none" :class="{ 'hidden': (servers.length === 0 && !loadingResults) || !searchActive }">
<router-link <div v-if="loadingResults">
v-for="server in servers" <a href="#">
:key="server.identifier" <div class="flex items-center">
:to="{ name: 'server', params: { id: server.identifier } }" <div class="flex-1">
> <span class="text-sm text-grey-darker">Loading...</span>
<div class="flex items-center"> </div>
<div class="flex-1"> <div class="flex-none">
<span class="font-bold text-grey-darkest">{{ server.name }}</span><br /> <span class="spinner spinner-relative"></span>
<span class="font-light text-grey-dark text-sm" v-if="server.description.length > 0">{{ server.description }}</span> </div>
</div> </div>
<div class="flex-none"> </a>
<span class="pillbox bg-indigo">{{ server.node }}</span> </div>
<div v-else>
<router-link
v-for="server in servers"
:key="server.identifier"
:to="{ name: 'server', params: { id: server.identifier } }"
>
<div class="flex items-center">
<div class="flex-1">
<span class="font-bold text-grey-darkest">{{ server.name }}</span><br />
<span class="font-light text-grey-dark text-sm" v-if="server.description.length > 0">{{ server.description }}</span>
</div>
<div class="flex-none">
<span class="pillbox bg-indigo">{{ server.node }}</span>
</div>
</div> </div>
</div> </router-link>
</router-link> </div>
</div> </div>
</div> </div>
<div class="menu flex-none"> <div class="menu flex-none">
@ -69,6 +83,7 @@
data: function () { data: function () {
return { return {
loadingResults: false,
searchActive: false, searchActive: false,
}; };
}, },
@ -88,6 +103,7 @@
methods: { methods: {
search: debounce(function () { search: debounce(function () {
if (this.searchTerm.length > 3) { if (this.searchTerm.length > 3) {
this.loadingResults = true;
this.gatherSearchResults(this.searchTerm); this.gatherSearchResults(this.searchTerm);
} }
}, 500), }, 500),
@ -106,6 +122,9 @@
this.error(error.detail); this.error(error.detail);
}); });
} }
})
.then(() => {
this.loadingResults = false;
}); });
}, },

2
resources/assets/styles/components/navigation.css
View File

@ -37,7 +37,7 @@
@apply .absolute .bg-grey-lightest .border .border-blue-darkest .border-t-0 .rounded .rounded-t-none .p-2 .mx-3 .z-50; @apply .absolute .bg-grey-lightest .border .border-blue-darkest .border-t-0 .rounded .rounded-t-none .p-2 .mx-3 .z-50;
width: 26rem; width: 26rem;
& > a { & a {
@apply .block .no-underline .p-2 .rounded; @apply .block .no-underline .p-2 .rounded;
&:hover { &:hover {

4
resources/assets/styles/components/spinners.css
View File

@ -15,6 +15,10 @@
left: calc(50% - (1em / 2)); left: calc(50% - (1em / 2));
} }
&.spinner-relative:after {
@apply .relative;
}
&.spinner-xl:after { &.spinner-xl:after {
@apply .h-16 .w-16; @apply .h-16 .w-16;
left: calc(50% - (4rem / 2)); left: calc(50% - (4rem / 2));