mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-25 12:57:28 +00:00
feat: add skeleton loading to summoners page
This commit is contained in:
Valentin Kaelin
parent
18ccfeb21c
commit
bd1341fb7a
4 changed files with 303 additions and 13 deletions
23
client/package-lock.json
generated
23
client/package-lock.json
generated
|
|
@ -2156,6 +2156,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"babel-helper-vue-jsx-merge-props": {
|
||||||
|
"version": "2.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
|
||||||
|
"integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
|
||||||
|
},
|
||||||
"babel-loader": {
|
"babel-loader": {
|
||||||
"version": "8.0.6",
|
"version": "8.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.6.tgz",
|
||||||
|
|
@ -2889,7 +2894,8 @@
|
||||||
"version": "4.6.0",
|
"version": "4.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
|
||||||
"integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
|
"integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"coa": {
|
"coa": {
|
||||||
"version": "2.0.2",
|
"version": "2.0.2",
|
||||||
|
|
@ -6402,7 +6408,8 @@
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
|
||||||
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
|
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"string-width": {
|
"string-width": {
|
||||||
"version": "2.1.1",
|
"version": "2.1.1",
|
||||||
|
|
@ -6420,6 +6427,7 @@
|
||||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
|
||||||
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
|
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"ansi-regex": "^3.0.0"
|
"ansi-regex": "^3.0.0"
|
||||||
}
|
}
|
||||||
|
|
@ -9548,7 +9556,8 @@
|
||||||
"version": "4.0.8",
|
"version": "4.0.8",
|
||||||
"resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
|
"resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
|
||||||
"integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
|
"integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"rx-lite-aggregates": {
|
"rx-lite-aggregates": {
|
||||||
"version": "4.0.8",
|
"version": "4.0.8",
|
||||||
|
|
@ -11155,6 +11164,14 @@
|
||||||
"integrity": "sha512-RRuo08A6mFye2RyLVdnODH5kyLiHANMl9EzKXZXCeMrsP4SY3nyjkQnTGlgbbVOBQuaGBMrFp9HPOJYDaVNk/w==",
|
"integrity": "sha512-RRuo08A6mFye2RyLVdnODH5kyLiHANMl9EzKXZXCeMrsP4SY3nyjkQnTGlgbbVOBQuaGBMrFp9HPOJYDaVNk/w==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"vue-content-loader": {
|
||||||
|
"version": "0.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue-content-loader/-/vue-content-loader-0.2.2.tgz",
|
||||||
|
"integrity": "sha512-8jcb0dJFiVAz7EPwpQjOd/GnswUiSDeKihEABkq/iAYxAI2MHSS7+VWlRblQDH3D1rm3Lewt7fDJoOpJKbYHjw==",
|
||||||
|
"requires": {
|
||||||
|
"babel-helper-vue-jsx-merge-props": "^2.0.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
"vue-eslint-parser": {
|
"vue-eslint-parser": {
|
||||||
"version": "2.0.3",
|
"version": "2.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.18.1",
|
"axios": "^0.18.1",
|
||||||
"vue": "^2.6.6",
|
"vue": "^2.6.6",
|
||||||
|
"vue-content-loader": "^0.2.2",
|
||||||
"vue-router": "^3.0.6",
|
"vue-router": "^3.0.6",
|
||||||
"vuex": "^3.1.1"
|
"vuex": "^3.1.1"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
274
client/src/components/SummonerLoader.vue
Normal file
274
client/src/components/SummonerLoader.vue
Normal file
|
|
@ -0,0 +1,274 @@
|
||||||
|
<template>
|
||||||
|
<div class="mt-4 container mx-auto text-white pb-12">
|
||||||
|
<div class="flex justify-between xl:px-12">
|
||||||
|
<div style="width: 517px; height: 272px;">
|
||||||
|
<content-loader
|
||||||
|
:height="272"
|
||||||
|
:width="517"
|
||||||
|
:speed="2"
|
||||||
|
primary-color="#17314f"
|
||||||
|
secondary-color="#2b6cb0"
|
||||||
|
>
|
||||||
|
<rect x="2" y="23" rx="3" ry="3" width="164" height="31" />
|
||||||
|
<circle cx="49" cy="121" r="48" />
|
||||||
|
<rect x="119" y="75" rx="3" ry="3" width="123" height="31" />
|
||||||
|
<rect x="119" y="116" rx="3" ry="3" width="164" height="31" />
|
||||||
|
<rect x="136" y="179" rx="3" ry="3" width="80" height="80" />
|
||||||
|
<rect x="222" y="209" rx="3" ry="3" width="59" height="22" />
|
||||||
|
<rect x="309" y="186" rx="3" ry="3" width="75" height="19" />
|
||||||
|
<rect x="426" y="186" rx="3" ry="3" width="75" height="19" />
|
||||||
|
<rect x="310" y="213" rx="3" ry="3" width="75" height="10" />
|
||||||
|
<rect x="320" y="231" rx="3" ry="3" width="65" height="10" />
|
||||||
|
<rect x="436" y="213" rx="3" ry="3" width="65" height="10" />
|
||||||
|
</content-loader>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-blue-800 rounded-lg" style="width: 351px; height: 210px;">
|
||||||
|
<content-loader
|
||||||
|
:height="210"
|
||||||
|
:width="351"
|
||||||
|
:speed="2"
|
||||||
|
primary-color="#17314f"
|
||||||
|
secondary-color="#2b6cb0"
|
||||||
|
>
|
||||||
|
<rect x="11" y="15" rx="3" ry="3" width="111.65" height="19" />
|
||||||
|
<rect x="53" y="40" rx="3" ry="3" width="30" height="11" />
|
||||||
|
<rect x="135" y="40" rx="3" ry="3" width="30" height="11" />
|
||||||
|
<rect x="220" y="40" rx="3" ry="3" width="30" height="11" />
|
||||||
|
<rect x="302" y="40" rx="3" ry="3" width="30" height="11" />
|
||||||
|
<rect x="10" y="61" rx="3" ry="3" width="22" height="11" />
|
||||||
|
<rect x="10" y="81" rx="3" ry="3" width="22" height="11" />
|
||||||
|
<rect x="10" y="101" rx="3" ry="3" width="22" height="11" />
|
||||||
|
<rect x="10" y="121" rx="3" ry="3" width="22" height="11" />
|
||||||
|
<rect x="10" y="141" rx="3" ry="3" width="22" height="11" />
|
||||||
|
<rect x="10" y="161" rx="3" ry="3" width="22" height="11" />
|
||||||
|
<rect x="10" y="181" rx="3" ry="3" width="22" height="11" />
|
||||||
|
<rect x="43" y="58" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="43" y="78" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="43" y="98" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="43" y="118" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="43" y="138" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="43" y="158" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="43" y="178" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="63" y="58" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="63" y="78" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="63" y="98" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="63" y="118" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="63" y="138" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="63" y="158" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="63" y="178" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="83" y="58" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="83" y="78" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="83" y="98" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="83" y="118" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="83" y="138" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="83" y="158" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="83" y="178" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="103" y="58" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="103" y="78" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="103" y="98" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="103" y="118" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="103" y="138" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="103" y="158" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="103" y="178" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="123" y="58" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="123" y="78" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="123" y="98" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="123" y="118" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="123" y="138" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="123" y="158" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="123" y="178" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="143" y="58" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="143" y="78" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="143" y="98" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="143" y="118" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="143" y="138" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="143" y="158" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="143" y="178" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="163" y="58" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="163" y="78" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="163" y="98" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="163" y="118" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="163" y="138" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="163" y="158" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="163" y="178" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="183" y="58" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="183" y="78" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="183" y="98" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="183" y="118" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="183" y="138" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="183" y="158" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="183" y="178" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="203" y="58" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="203" y="78" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="203" y="98" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="203" y="118" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="203" y="138" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="203" y="158" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="203" y="178" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="223" y="58" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="223" y="78" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="223" y="98" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="223" y="118" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="223" y="138" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="223" y="158" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="223" y="178" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="243" y="58" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="243" y="78" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="243" y="98" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="243" y="118" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="243" y="138" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="243" y="158" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="243" y="178" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="263" y="58" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="263" y="78" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="263" y="98" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="263" y="118" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="263" y="138" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="263" y="158" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="263" y="178" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="283" y="58" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="283" y="78" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="283" y="98" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="283" y="118" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="283" y="138" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="283" y="158" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="283" y="178" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="303" y="58" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="303" y="78" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="303" y="98" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="303" y="118" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="303" y="138" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="303" y="158" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="303" y="178" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="323" y="58" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="323" y="78" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="323" y="98" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="323" y="118" rx="0" ry="0" width="16" height="16" />
|
||||||
|
<rect x="323" y="138" rx="0" ry="0" width="16" height="16" />
|
||||||
|
</content-loader>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 text-center">
|
||||||
|
<ul class="text-gray-900">
|
||||||
|
<div
|
||||||
|
v-for="index in 10"
|
||||||
|
:key="index"
|
||||||
|
class="ml-10 mt-4 rounded-lg w-full bg-blue-800"
|
||||||
|
style="width: 1240px; height: 144px;"
|
||||||
|
>
|
||||||
|
<content-loader
|
||||||
|
:height="144"
|
||||||
|
:width="1240"
|
||||||
|
: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="37" rx="8" ry="8" width="64" height="64" />
|
||||||
|
<rect x="142" y="41" rx="6" ry="6" width="24" height="24" />
|
||||||
|
<rect x="142" y="73" rx="6" ry="6" width="24" height="24" />
|
||||||
|
<rect x="424" y="37" rx="6" ry="6" width="32" height="32" />
|
||||||
|
<rect x="460" y="37" rx="6" ry="6" width="32" height="32" />
|
||||||
|
<rect x="496" y="37" rx="6" ry="6" width="32" height="32" />
|
||||||
|
<rect x="424" y="73" rx="6" ry="6" width="32" height="32" />
|
||||||
|
<rect x="460" y="73" rx="6" ry="6" width="32" height="32" />
|
||||||
|
<rect x="496" y="73" rx="6" ry="6" width="32" height="32" />
|
||||||
|
<rect x="580" y="38" rx="3" ry="3" width="72" height="13" />
|
||||||
|
<rect x="580" y="57" rx="3" ry="3" width="103" height="13" />
|
||||||
|
<rect x="580" y="76" rx="3" ry="3" width="131" height="13" />
|
||||||
|
<rect x="580" y="95" rx="3" ry="3" width="131" height="13" />
|
||||||
|
<circle cx="916" cy="33" r="12" />
|
||||||
|
<circle cx="916" cy="53" r="12" />
|
||||||
|
<circle cx="916" cy="73" r="12" />
|
||||||
|
<circle cx="916" cy="93" r="12" />
|
||||||
|
<circle cx="916" cy="113" r="12" />
|
||||||
|
<circle cx="980" cy="33" r="12" />
|
||||||
|
<circle cx="980" cy="53" r="12" />
|
||||||
|
<circle cx="980" cy="73" r="12" />
|
||||||
|
<circle cx="980" cy="93" r="12" />
|
||||||
|
<circle cx="980" cy="113" r="12" />
|
||||||
|
<rect x="827" y="29" rx="3" ry="3" width="72" height="9" />
|
||||||
|
<rect x="827" y="49" rx="3" ry="3" width="72" height="9" />
|
||||||
|
<rect x="827" y="69" rx="3" ry="3" width="72" height="9" />
|
||||||
|
<rect x="827" y="89" rx="3" ry="3" width="72" height="9" />
|
||||||
|
<rect x="827" y="109" rx="3" ry="3" width="72" height="9" />
|
||||||
|
<rect x="997" y="29" rx="3" ry="3" width="72" height="9" />
|
||||||
|
<rect x="997" y="49" rx="3" ry="3" width="72" height="9" />
|
||||||
|
<rect x="997" y="69" rx="3" ry="3" width="72" height="9" />
|
||||||
|
<rect x="997" y="89" rx="3" ry="3" width="72" height="9" />
|
||||||
|
<rect x="997" y="109" rx="3" ry="3" width="72" height="9" />
|
||||||
|
<circle cx="1188.58" cy="50.55" r="11.88" />
|
||||||
|
<rect x="1156" y="66" rx="3" ry="3" width="64" height="17" />
|
||||||
|
<rect x="1158" y="90" rx="3" ry="3" width="59" height="14" />
|
||||||
|
</content-loader>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ContentLoader } from 'vue-content-loader'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
ContentLoader
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.match-loading {
|
||||||
|
height: 144px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LOADER */
|
||||||
|
.loader {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
background-size: 100vw 296px;
|
||||||
|
/* background-image: linear-gradient(120deg, #EBEBEB 20%, #F8F8F8 28%, #EBEBEB 43%); */
|
||||||
|
background-image: linear-gradient(
|
||||||
|
120deg,
|
||||||
|
#2c5282 20%,
|
||||||
|
#2b6cb0 28%,
|
||||||
|
#2c5282 43%
|
||||||
|
);
|
||||||
|
|
||||||
|
animation-name: loadingAnimation;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-duration: 2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loadingAnimation {
|
||||||
|
from {
|
||||||
|
background-position: -100vw 0px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-position: 100vw 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Items inside loader */
|
||||||
|
.loader .item {
|
||||||
|
position: absolute;
|
||||||
|
background: #17314f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader .item-1 {
|
||||||
|
left: 12px;
|
||||||
|
top: 0;
|
||||||
|
width: 10px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -8,10 +8,10 @@
|
||||||
></LazyBackground>
|
></LazyBackground>
|
||||||
|
|
||||||
<div class="relative z-10">
|
<div class="relative z-10">
|
||||||
<header class="mb-4 text-teal-100">
|
<header class="text-teal-100">
|
||||||
<div class="container mx-auto flex justify-between items-center">
|
<div class="container mx-auto flex justify-between items-center">
|
||||||
<router-link to="/">
|
<router-link to="/">
|
||||||
<img class="w-56" src="@/assets/img/Logo.svg" alt="LeagueStats logo" />
|
<img class="h-24" src="@/assets/img/Logo.svg" alt="LeagueStats logo" />
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
||||||
<SearchForm @formSubmit="redirect" size="small" />
|
<SearchForm @formSubmit="redirect" size="small" />
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<template v-if="summonerFound">
|
<template v-if="summonerFound">
|
||||||
<div class="container mx-auto text-white pb-12">
|
<div class="mt-4 container mx-auto text-white pb-12">
|
||||||
<div class="flex justify-between xl:px-12">
|
<div class="flex justify-between xl:px-12">
|
||||||
<div>
|
<div>
|
||||||
<h1 class="text-4xl font-extrabold uppercase">
|
<h1 class="text-4xl font-extrabold uppercase">
|
||||||
|
|
@ -70,15 +70,11 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-else-if="summonerLoading">
|
<template v-else-if="summonerLoading">
|
||||||
<div
|
<SummonerLoader />
|
||||||
class="flex items-center justify-center bg-white max-w-xs mx-auto p-5 rounded-lg shadow-xl"
|
|
||||||
>
|
|
||||||
<dot-loader :loading="summonerLoading" />
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-else-if="summonerNotFound">
|
<template v-else-if="summonerNotFound">
|
||||||
<div class="mt-12 flex justify-center">
|
<div class="mt-16 flex justify-center">
|
||||||
<div class="bg-gradient px-4 py-3 rounded-lg text-center text-lg text-blue-100 font-bold">
|
<div class="bg-gradient px-4 py-3 rounded-lg text-center text-lg text-blue-100 font-bold">
|
||||||
<div>Player can't be found.</div>
|
<div>Player can't be found.</div>
|
||||||
<div>😕</div>
|
<div>😕</div>
|
||||||
|
|
@ -94,6 +90,7 @@ import { mapState, mapActions, mapGetters } from 'vuex'
|
||||||
import LazyBackground from '@/components/LazyBackgroundImage.vue'
|
import LazyBackground from '@/components/LazyBackgroundImage.vue'
|
||||||
import LoadingButton from '@/components/LoadingButton.vue'
|
import LoadingButton from '@/components/LoadingButton.vue'
|
||||||
import RecentActivity from '@/components/RecentActivity.vue'
|
import RecentActivity from '@/components/RecentActivity.vue'
|
||||||
|
import SummonerLoader from '@/components/SummonerLoader.vue'
|
||||||
import SummonerRanked from '@/components/SummonerRanked.vue'
|
import SummonerRanked from '@/components/SummonerRanked.vue'
|
||||||
import Match from '@/components/Match.vue'
|
import Match from '@/components/Match.vue'
|
||||||
import SearchForm from '@/components/SearchForm.vue'
|
import SearchForm from '@/components/SearchForm.vue'
|
||||||
|
|
@ -105,7 +102,8 @@ export default {
|
||||||
Match,
|
Match,
|
||||||
RecentActivity,
|
RecentActivity,
|
||||||
SearchForm,
|
SearchForm,
|
||||||
SummonerRanked
|
SummonerLoader,
|
||||||
|
SummonerRanked,
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue