Creepso/migu
1
0
Fork 0
mirror of https://github.com/NoCrypt/migu.git synced 2026-03-11 17:45:32 +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",
"version": "4.3.11",
"version": "4.3.12",
"author": "ThaUnknown_ <ThaUnknown@users.noreply.github.com>",
"description": "Stream anime torrents, real-time with no waiting for downloads.",
"main": "build/main.js",

4
src/renderer/Router.svelte
View file

@ -10,8 +10,8 @@
export let page = 'home'
</script>
<div class='wrapper h-full position-absolute overflow-hidden pointer-events-none'>
<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'>
<div class='wrapper h-full position-absolute overflow-hidden'>
<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 />
</Miniplayer>
</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='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='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 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-50 bg-dark-light 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='skeleloader-swipe' /></div>
</div>
</div>
</div>
@ -19,7 +19,7 @@
width: 36rem
}
.wrapper {
height: 27.7rem;
contain-intrinsic-height: 27.7rem;
height: 28.7rem;
contain-intrinsic-height: 28.7rem;
}
</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='card m-0 p-0 overflow-hidden'>
<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'>
<p class='skeloader bg-dark-light w-300 h-25 rounded bg-dark' />
<p class='skeloader bg-dark-light w-150 h-10 rounded bg-dark' />
<p class='skeloader bg-dark-light w-150 h-10 rounded bg-dark' />
<div class='skeloader bg-dark-light w-300 h-25 rounded bg-dark'><div class='skeleloader-swipe' /></div>
<div class='skeloader bg-dark-light w-150 h-10 rounded bg-dark'><div class='skeleloader-swipe' /></div>
<div class='skeloader bg-dark-light w-150 h-10 rounded bg-dark'><div class='skeleloader-swipe' /></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='item d-flex flex-column h-full'>
<div class='img w-full rounded skeloader bg-dark-light' />
<div class='skeloader rounded bg-dark-light h-10 w-150 mt-15' />
<div class='skeloader rounded bg-dark-light h-10 w-100 mt-15' />
<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='skeleloader-swipe' /></div>
<div class='skeloader rounded bg-dark-light h-10 w-100 mt-15'><div class='skeleloader-swipe' /></div>
</div>
</div>

13
src/renderer/css.css
View file

@ -145,11 +145,11 @@ img[src=''], img[src=' '] {
@keyframes load {
from {
left: -15rem;
background-position-x: 200%;
}
to {
left: 100%;
background-position-x: -100%;
}
}
@keyframes load-in {
@ -169,13 +169,12 @@ img[src=''], img[src=' '] {
overflow: hidden;
}
.skeloader::before {
will-change: left;
content: '';
position: absolute;
.skeloader .skeleloader-swipe {
height: 100%;
width: 15rem;
width: 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);
}

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

@ -181,7 +181,7 @@
<Tabs>
<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>
{#each Object.values(groups) as group}
<TabLabel>