Creepso/migu
1
0
Fork 0
mirror of https://github.com/NoCrypt/migu.git synced 2026-04-21 08:31:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: greatly improve UI performance

Browse source
This commit is contained in:
ThaUnknown 2023-08-24 22:21:17 +02:00
parent 4a4644d710
commit ee67013b3d
7 changed files with 23 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "Miru", "name": "Miru",
"version": "4.3.11", "version": "4.3.12",
"author": "ThaUnknown_ <ThaUnknown@users.noreply.github.com>", "author": "ThaUnknown_ <ThaUnknown@users.noreply.github.com>",
"description": "Stream anime torrents, real-time with no waiting for downloads.", "description": "Stream anime torrents, real-time with no waiting for downloads.",
"main": "build/main.js", "main": "build/main.js",

4
src/renderer/Router.svelte
View file

@ -10,8 +10,8 @@
export let page = 'home' export let page = 'home'
</script> </script>
<div class='wrapper h-full position-absolute overflow-hidden pointer-events-none'> <div class='wrapper h-full position-absolute overflow-hidden'>
<Miniplayer active={page !== 'player'} class='bg-dark-light z-10 pointer-events-auto {page === 'player' ? 'h-full' : ''}' minwidth='35rem' maxwidth='60rem' width='300px' padding='2rem'> <Miniplayer active={page !== 'player'} class='bg-dark-light z-10 {page === 'player' ? 'h-full' : ''}' minwidth='35rem' maxwidth='60rem' width='300px' padding='2rem'>
<MediaHandler miniplayer={page !== 'player'} bind:page /> <MediaHandler miniplayer={page !== 'player'} bind:page />
</Miniplayer> </Miniplayer>
</div> </div>

12
src/renderer/components/cards/EpisodeSkeletonCard.svelte
View file

@ -1,13 +1,13 @@
<div class='d-flex p-20 pb-10 position-relative wrapper content-visibility-auto'> <div class='d-flex p-20 pb-10 position-relative wrapper content-visibility-auto'>
<div class='item d-flex flex-column h-full'> <div class='item d-flex flex-column h-full'>
<div class='image h-200 w-full rounded skeloader bg-dark-light' /> <div class='image h-200 w-full rounded skeloader bg-dark-light'><div class='skeleloader-swipe' /></div>
<div class='row pt-15'> <div class='row pt-15'>
<div class='col-7'> <div class='col-7'>
<div class='h-10 skeloader w-150 bg-dark-light rounded ' /> <div class='h-10 skeloader w-150 bg-dark-light rounded '><div class='skeleloader-swipe' /></div>
</div> </div>
<div class='col-5 d-flex flex-column align-items-end'> <div class='col-5 d-flex flex-column align-items-end'>
<div class='h-10 skeloader w-100 bg-dark-light mb-5 rounded ' /> <div class='h-10 skeloader w-100 bg-dark-light mb-5 rounded'><div class='skeleloader-swipe' /></div>
<div class='h-10 skeloader w-50 bg-dark-light rounded ' /> <div class='h-10 skeloader w-50 bg-dark-light rounded'><div class='skeleloader-swipe' /></div>
</div> </div>
</div> </div>
</div> </div>
@ -19,7 +19,7 @@
width: 36rem width: 36rem
} }
.wrapper { .wrapper {
height: 27.7rem; height: 28.7rem;
contain-intrinsic-height: 27.7rem; contain-intrinsic-height: 28.7rem;
} }
</style> </style>

8
src/renderer/components/cards/FullSkeletonCard.svelte
View file

@ -1,11 +1,11 @@
<div class='d-flex px-20 py-10 position-relative content-visibility-auto'> <div class='d-flex px-20 py-10 position-relative content-visibility-auto'>
<div class='card m-0 p-0 overflow-hidden'> <div class='card m-0 p-0 overflow-hidden'>
<div class='row h-full'> <div class='row h-full'>
<div class='col-4 skeloader bg-dark-light' /> <div class='col-4 skeloader bg-dark-light'><div class='skeleloader-swipe' /></div>
<div class='col-8 bg-very-dark px-15 py-10'> <div class='col-8 bg-very-dark px-15 py-10'>
<p class='skeloader bg-dark-light w-300 h-25 rounded bg-dark' /> <div class='skeloader bg-dark-light w-300 h-25 rounded bg-dark'><div class='skeleloader-swipe' /></div>
<p class='skeloader bg-dark-light w-150 h-10 rounded bg-dark' /> <div class='skeloader bg-dark-light w-150 h-10 rounded bg-dark'><div class='skeleloader-swipe' /></div>
<p class='skeloader bg-dark-light w-150 h-10 rounded bg-dark' /> <div class='skeloader bg-dark-light w-150 h-10 rounded bg-dark'><div class='skeleloader-swipe' /></div>
</div> </div>
</div> </div>
</div> </div>

6
src/renderer/components/cards/SkeletonCard.svelte
View file

@ -1,8 +1,8 @@
<div class='d-flex p-20 wrapper content-visibility-auto'> <div class='d-flex p-20 wrapper content-visibility-auto'>
<div class='item d-flex flex-column h-full'> <div class='item d-flex flex-column h-full'>
<div class='img w-full rounded skeloader bg-dark-light' /> <div class='img w-full rounded skeloader bg-dark-light'><div class='skeleloader-swipe' /></div>
<div class='skeloader rounded bg-dark-light h-10 w-150 mt-15' /> <div class='skeloader rounded bg-dark-light h-10 w-150 mt-15'><div class='skeleloader-swipe' /></div>
<div class='skeloader rounded bg-dark-light h-10 w-100 mt-15' /> <div class='skeloader rounded bg-dark-light h-10 w-100 mt-15'><div class='skeleloader-swipe' /></div>
</div> </div>
</div> </div>

13
src/renderer/css.css
View file

@ -145,11 +145,11 @@ img[src=''], img[src=' '] {
@keyframes load { @keyframes load {
from { from {
left: -15rem; background-position-x: 200%;
} }
to { to {
left: 100%; background-position-x: -100%;
} }
} }
@keyframes load-in { @keyframes load-in {
@ -169,13 +169,12 @@ img[src=''], img[src=' '] {
overflow: hidden; overflow: hidden;
} }
.skeloader::before { .skeloader .skeleloader-swipe {
will-change: left;
content: '';
position: absolute;
height: 100%; height: 100%;
width: 15rem; width: 100%;
background: linear-gradient(to right, transparent 0%, #17191c 50%, transparent 100%); background: linear-gradient(to right, transparent 0%, #17191c 50%, transparent 100%);
background-repeat: no-repeat;
background-size: 200% 100%;
animation: load 1s infinite cubic-bezier(0.4, 0, 0.2, 1); animation: load 1s infinite cubic-bezier(0.4, 0, 0.2, 1);
} }

2
src/renderer/views/Settings.svelte
View file

@ -181,7 +181,7 @@
<Tabs> <Tabs>
<div class='d-flex w-full h-full'> <div class='d-flex w-full h-full'>
<div class='d-flex flex-column h-full w-300 bg-dark'> <div class='d-flex flex-column h-full w-300 bg-dark position-relative'>
<div class='px-20 py-15 font-size-20 font-weight-semi-bold border-bottom root'>Settings</div> <div class='px-20 py-15 font-size-20 font-weight-semi-bold border-bottom root'>Settings</div>
{#each Object.values(groups) as group} {#each Object.values(groups) as group}
<TabLabel> <TabLabel>