Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 12:57:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add content loader on champions tab

Browse source
This commit is contained in:
Valentin Kaelin 2019-12-30 22:51:19 +01:00
parent eaefb92030
commit 9d2854ad25
2 changed files with 38 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
client/src/components/Summoner/Champions/ChampionsTable.vue
View file

@ -20,7 +20,7 @@
></th> ></th>
</tr> </tr>
</thead> </thead>
<tbody class="bg-blue-760"> <tbody v-if="champions.length" class="bg-blue-760">
<tr <tr
v-for="(champion, index) in championsToDisplay" v-for="(champion, index) in championsToDisplay"
:key="champion._id" :key="champion._id"
@ -95,13 +95,48 @@
>{{ champion.lastPlayed }}</td> >{{ champion.lastPlayed }}</td>
</tr> </tr>
</tbody> </tbody>
<tbody v-else>
<tr v-for="index in 11" :key="index">
<td colspan="14">
<content-loader
:height="50"
:width="1200"
:speed="2"
primary-color="#17314f"
secondary-color="#2b6cb0"
>
<rect x="31" y="16" rx="3" ry="3" width="20" height="20" />
<circle cx="101" cy="26" r="12" />
<rect x="119" y="16" rx="3" ry="3" width="50" height="20" />
<rect x="234.5" y="16" rx="3" ry="3" width="45" height="20" />
<rect x="316.5" y="16" rx="3" ry="3" width="45" height="20" />
<rect x="398.5" y="16" rx="3" ry="3" width="45" height="20" />
<rect x="480.5" y="16" rx="3" ry="3" width="45" height="20" />
<rect x="565" y="14" rx="3" ry="3" width="40" height="10" />
<rect x="558" y="30" rx="3" ry="3" width="55" height="10" />
<rect x="644.5" y="16" rx="3" ry="3" width="45" height="20" />
<rect x="726.5" y="16" rx="3" ry="3" width="45" height="20" />
<rect x="808.5" y="16" rx="3" ry="3" width="45" height="20" />
<rect x="890.5" y="16" rx="3" ry="3" width="45" height="20" />
<rect x="972.5" y="16" rx="3" ry="3" width="45" height="20" />
<rect x="1052" y="16" rx="3" ry="3" width="50" height="20" />
<rect x="1129" y="16" rx="3" ry="3" width="60" height="20" />
</content-loader>
</td>
</tr>
</tbody>
</table> </table>
</template> </template>
<script> <script>
import { ContentLoader } from 'vue-content-loader'
import { timeDifference } from '@/helpers/functions.js' import { timeDifference } from '@/helpers/functions.js'
export default { export default {
components: {
ContentLoader,
},
props: { props: {
champions: { champions: {
type: Array, type: Array,

12
client/src/views/SummonerChampions.vue
View file

@ -1,18 +1,10 @@
<template> <template>
<div v-if="championsLoaded" key="champions" class="mt-3"> <div key="champions" class="mt-3">
<div class="mt-4 flex items-center"> <div class="mt-4 flex items-center">
<ChampionsSearch @search-champions="updateSearch" /> <ChampionsSearch @search-champions="updateSearch" />
<FilterQueue @filter-queue="filterByQueue" :choices="queues" class="ml-4" /> <FilterQueue @filter-queue="filterByQueue" :choices="queues" class="ml-4" />
</div> </div>
<ChampionsTable <ChampionsTable :champions="champions" :search="searchChampions" class="mt-6" />
v-if="champions.length"
:champions="champions"
:search="searchChampions"
class="mt-6"
/>
</div>
<div v-else class="mt-3">
<div class="mt-4 text-white">LOADING CHAMPIONS</div>
</div> </div>
</template> </template>