mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-25 12:57:28 +00:00
refactor: loader in 2 steps
This commit is contained in:
Valentin Kaelin
parent
526611a517
commit
d0bd66d1f7
5 changed files with 110 additions and 98 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="text-white pb-12">
|
||||
<div class="text-white">
|
||||
<div class="flex justify-between">
|
||||
<div style="width: 517px; height: 272px;">
|
||||
<div style="width: 517px; height: 244px;">
|
||||
<content-loader
|
||||
:height="272"
|
||||
:width="517"
|
||||
|
|
@ -149,78 +149,6 @@
|
|||
</content-loader>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<div
|
||||
v-for="index in 10"
|
||||
:key="index"
|
||||
class="ml-10 mt-4 rounded-lg w-full bg-blue-800"
|
||||
style="width: 1160px; height: 144px;"
|
||||
>
|
||||
<content-loader
|
||||
:height="144"
|
||||
:width="1160"
|
||||
:speed="2"
|
||||
primary-color="#17314f"
|
||||
secondary-color="#2b6cb0"
|
||||
>
|
||||
<rect x="241" y="46" rx="3" ry="3" width="94.35" height="26.5" />
|
||||
<rect x="309" y="91.67" rx="0" ry="0" width="3" height="0" />
|
||||
<rect x="330" y="105.67" rx="0" ry="0" width="0" height="0" />
|
||||
<rect x="312" y="94.67" rx="0" ry="0" width="0" height="0" />
|
||||
<rect x="305" y="65.67" rx="0" ry="0" width="0" height="0" />
|
||||
<rect x="258" y="80.34" rx="3" ry="3" width="59.5" height="16.7" />
|
||||
<rect x="68" y="36" rx="8" ry="8" width="64" height="64" />
|
||||
<rect x="142" y="40" rx="6" ry="6" width="24" height="24" />
|
||||
<rect x="142" y="72" rx="6" ry="6" width="24" height="24" />
|
||||
<rect x="396" y="36" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="432" y="36" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="468" y="36" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="396" y="72" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="432" y="72" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="468" y="72" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="555" y="38" rx="3" ry="3" width="72" height="13" />
|
||||
<rect x="555" y="57" rx="3" ry="3" width="103" height="13" />
|
||||
<rect x="555" y="76" rx="3" ry="3" width="131" height="13" />
|
||||
<rect x="555" y="95" rx="3" ry="3" width="131" height="13" />
|
||||
<circle cx="862" cy="32" r="12" />
|
||||
<circle cx="862" cy="52" r="12" />
|
||||
<circle cx="862" cy="72" r="12" />
|
||||
<circle cx="862" cy="92" r="12" />
|
||||
<circle cx="862" cy="112" r="12" />
|
||||
<circle cx="926" cy="32" r="12" />
|
||||
<circle cx="926" cy="52" r="12" />
|
||||
<circle cx="926" cy="72" r="12" />
|
||||
<circle cx="926" cy="92" r="12" />
|
||||
<circle cx="926" cy="112" r="12" />
|
||||
<rect x="770" y="29" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="770" y="49" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="770" y="69" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="770" y="89" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="770" y="109" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="945" y="29" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="945" y="49" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="945" y="69" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="945" y="89" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="945" y="109" rx="3" ry="3" width="72" height="9" />
|
||||
<circle cx="1106" cy="50.55" r="11.88" />
|
||||
<rect x="1074" y="66" rx="3" ry="3" width="64" height="17" />
|
||||
<rect x="1077" y="90" rx="3" ry="3" width="59" height="14" />
|
||||
</content-loader>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 mx-auto" style="width: 135px; height: 40px;">
|
||||
<content-loader
|
||||
:height="40"
|
||||
:width="135"
|
||||
:speed="2"
|
||||
primary-color="#17314f"
|
||||
secondary-color="#2b6cb0"
|
||||
>
|
||||
<rect x="0" y="0" rx="6" ry="6" width="135" height="40" />
|
||||
</content-loader>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</header>
|
||||
|
||||
<template v-if="summonerFound">
|
||||
<div class="text-white pb-12">
|
||||
<div class="text-white">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<div class="flex items-center">
|
||||
|
|
@ -70,18 +70,19 @@
|
|||
class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
|
||||
exact
|
||||
>champions</router-link>
|
||||
<transition
|
||||
<!-- <transition
|
||||
enter-active-class="transition-all transition-fast ease-out-quad"
|
||||
enter-class="opacity-0 scale-90"
|
||||
enter-to-class="opacity-100 scale-100"
|
||||
>
|
||||
<slot></slot>
|
||||
</transition>
|
||||
> -->
|
||||
<slot></slot>
|
||||
<!-- </transition> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="summonerLoading">
|
||||
<SummonerLoader />
|
||||
<slot></slot>
|
||||
</template>
|
||||
|
||||
<template v-else-if="summonerNotFound">
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ export const state = {
|
|||
export const mutations = {
|
||||
BASIC_REQUEST(state) {
|
||||
state.basic.status = 'loading'
|
||||
state.champions.championsLoaded = false
|
||||
},
|
||||
CHAMPIONS_FOUND(state, { champions }) {
|
||||
state.champions.list = champions
|
||||
|
|
@ -54,7 +55,6 @@ export const mutations = {
|
|||
state.basic.ranked = infos.ranked
|
||||
state.basic.playing = infos.playing
|
||||
state.basic.status = 'found'
|
||||
state.champions.championsLoaded = false
|
||||
},
|
||||
SUMMONER_NOT_FOUND(state) {
|
||||
state.basic.status = 'error'
|
||||
|
|
@ -108,6 +108,12 @@ export const actions = {
|
|||
},
|
||||
async overviewRequest({ commit }) {
|
||||
const resp = await axios(({ url: 'summoner-overview', data: { account: state.basic.account }, method: 'POST' })).catch(() => { })
|
||||
// setTimeout(() => {
|
||||
// console.log('OVERVIEW')
|
||||
// console.log(resp.data)
|
||||
// resp.data.matches = createMatchData(resp.data.matchesDetails)
|
||||
// commit('OVERVIEW_FOUND', resp.data)
|
||||
// }, 2000)
|
||||
console.log('OVERVIEW')
|
||||
console.log(resp.data)
|
||||
resp.data.matches = createMatchData(resp.data.matchesDetails)
|
||||
|
|
|
|||
|
|
@ -21,10 +21,84 @@
|
|||
>More matches</LoadingButton>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="" style="margin-top: 1.75rem">
|
||||
<div class="mt-4 text-center">
|
||||
<div
|
||||
v-for="index in 10"
|
||||
:key="index"
|
||||
class="ml-10 mt-4 rounded-lg w-full bg-blue-800"
|
||||
style="width: 1160px; height: 144px;"
|
||||
>
|
||||
<content-loader
|
||||
:height="144"
|
||||
:width="1160"
|
||||
:speed="2"
|
||||
primary-color="#17314f"
|
||||
secondary-color="#2b6cb0"
|
||||
>
|
||||
<rect x="241" y="46" rx="3" ry="3" width="94.35" height="26.5" />
|
||||
<rect x="309" y="91.67" rx="0" ry="0" width="3" height="0" />
|
||||
<rect x="330" y="105.67" rx="0" ry="0" width="0" height="0" />
|
||||
<rect x="312" y="94.67" rx="0" ry="0" width="0" height="0" />
|
||||
<rect x="305" y="65.67" rx="0" ry="0" width="0" height="0" />
|
||||
<rect x="258" y="80.34" rx="3" ry="3" width="59.5" height="16.7" />
|
||||
<rect x="68" y="36" rx="8" ry="8" width="64" height="64" />
|
||||
<rect x="142" y="40" rx="6" ry="6" width="24" height="24" />
|
||||
<rect x="142" y="72" rx="6" ry="6" width="24" height="24" />
|
||||
<rect x="396" y="36" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="432" y="36" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="468" y="36" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="396" y="72" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="432" y="72" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="468" y="72" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="555" y="38" rx="3" ry="3" width="72" height="13" />
|
||||
<rect x="555" y="57" rx="3" ry="3" width="103" height="13" />
|
||||
<rect x="555" y="76" rx="3" ry="3" width="131" height="13" />
|
||||
<rect x="555" y="95" rx="3" ry="3" width="131" height="13" />
|
||||
<circle cx="862" cy="32" r="12" />
|
||||
<circle cx="862" cy="52" r="12" />
|
||||
<circle cx="862" cy="72" r="12" />
|
||||
<circle cx="862" cy="92" r="12" />
|
||||
<circle cx="862" cy="112" r="12" />
|
||||
<circle cx="926" cy="32" r="12" />
|
||||
<circle cx="926" cy="52" r="12" />
|
||||
<circle cx="926" cy="72" r="12" />
|
||||
<circle cx="926" cy="92" r="12" />
|
||||
<circle cx="926" cy="112" r="12" />
|
||||
<rect x="770" y="29" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="770" y="49" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="770" y="69" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="770" y="89" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="770" y="109" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="945" y="29" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="945" y="49" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="945" y="69" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="945" y="89" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="945" y="109" rx="3" ry="3" width="72" height="9" />
|
||||
<circle cx="1106" cy="50.55" r="11.88" />
|
||||
<rect x="1074" y="66" rx="3" ry="3" width="64" height="17" />
|
||||
<rect x="1077" y="90" rx="3" ry="3" width="59" height="14" />
|
||||
</content-loader>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 mx-auto" style="width: 135px; height: 40px;">
|
||||
<content-loader
|
||||
:height="40"
|
||||
:width="135"
|
||||
:speed="2"
|
||||
primary-color="#17314f"
|
||||
secondary-color="#2b6cb0"
|
||||
>
|
||||
<rect x="0" y="0" rx="6" ry="6" width="135" height="40" />
|
||||
</content-loader>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { ContentLoader } from 'vue-content-loader'
|
||||
import { mapState, mapActions, mapGetters } from 'vuex'
|
||||
import LoadingButton from '@/components/LoadingButton.vue'
|
||||
import Match from '@/components/Match/Match.vue'
|
||||
|
|
@ -34,6 +108,7 @@ import SummonerStats from '@/components/Summoner/Overview/SummonerStats.vue'
|
|||
|
||||
export default {
|
||||
components: {
|
||||
ContentLoader,
|
||||
LoadingButton,
|
||||
Match,
|
||||
SummonerChampions,
|
||||
|
|
@ -45,11 +120,12 @@ export default {
|
|||
...mapState({
|
||||
overview: state => state.summoner.overview
|
||||
}),
|
||||
...mapGetters('summoner', ['matchesLoading', 'moreMatchesToFetch', 'overviewLoaded'])
|
||||
...mapGetters('summoner', ['matchesLoading', 'moreMatchesToFetch', 'overviewLoaded', 'summonerFound'])
|
||||
},
|
||||
|
||||
created() {
|
||||
this.overviewRequest()
|
||||
if(this.summonerFound)
|
||||
this.overviewRequest()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -1,24 +1,23 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="mt-3">
|
||||
<template v-if="championsLoaded">
|
||||
<div class="mt-4 flex items-center">
|
||||
<ChampionsSearch @search-champions="updateSearch" />
|
||||
<FilterQueue @filter-queue="filterByQueue" :choices="queues" class="ml-4" />
|
||||
</div>
|
||||
<ChampionsTable
|
||||
v-if="champions.length"
|
||||
:champions="champions"
|
||||
:search="searchChampions"
|
||||
class="mt-6"
|
||||
/>
|
||||
</template>
|
||||
<div v-if="championsLoaded" class="mt-3">
|
||||
<div class="mt-4 flex items-center">
|
||||
<ChampionsSearch @search-champions="updateSearch" />
|
||||
<FilterQueue @filter-queue="filterByQueue" :choices="queues" class="ml-4" />
|
||||
</div>
|
||||
<ChampionsTable
|
||||
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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapState } from 'vuex'
|
||||
import { mapActions, mapGetters, mapState } from 'vuex'
|
||||
import { gameModes } from '@/data/data.js'
|
||||
import ChampionsSearch from '@/components/Summoner/Champions/ChampionsSearch.vue'
|
||||
import ChampionsTable from '@/components/Summoner/Champions/ChampionsTable.vue'
|
||||
|
|
@ -53,6 +52,7 @@ export default {
|
|||
}, {})
|
||||
return { '-1': { type: 'Normal', name: 'ALL QUEUES' }, ...queues }
|
||||
},
|
||||
...mapGetters('summoner', ['summonerFound']),
|
||||
...mapState({
|
||||
champions: state => state.summoner.champions.list,
|
||||
championsLoaded: state => state.summoner.champions.championsLoaded,
|
||||
|
|
@ -61,7 +61,8 @@ export default {
|
|||
},
|
||||
|
||||
created() {
|
||||
if (!this.championsLoaded) {
|
||||
console.log('HELLO')
|
||||
if (!this.championsLoaded && this.summonerFound) {
|
||||
console.log('FETCH CHAMPIONS')
|
||||
this.championStats()
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue