yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

machine-list:loading skeleton

Browse Source
This commit is contained in:
Timo
2025-05-07 09:23:08 +02:00
committed by Johannes Kirschbauer
parent a584a6d6c5
commit 71b51356a7
2 changed files with 113 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
pkgs/webview-ui/app/src/index.css
View File

@@ -110,3 +110,88 @@ summary::marker {
.accordeon__body {
}
.machine-item-loader {
@apply col-span-1 flex flex-col items-center;
display: flex;
justify-content: center;
position: relative;
padding: theme(padding.2);
border-radius: theme(borderRadius.md);
overflow: hidden;
cursor: pointer;
}
.machine-item-loader__thumb-wrapper {
position: relative;
z-index: 20;
padding: theme(padding.4);
border-radius: theme(borderRadius.md);
overflow: hidden;
}
.machine-item-loader__thumb {
position: relative;
width: 100px;
height: 100px;
background: theme(backgroundColor.secondary.100);
border-radius: theme(borderRadius.md);
overflow: hidden;
}
.machine-item-loader__headline {
position: relative;
z-index: 20;
width: 90%;
height: 20px;
background: theme(backgroundColor.secondary.100);
border-radius: theme(borderRadius.sm);
overflow: hidden;
}
.machine-item-loader__cover {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.machine-item-loader__loader {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to right,
transparent 20%,
theme(backgroundColor.secondary.200) 50%,
transparent 80%
);
background-size: 400px 100%;
animation: loader 4s linear infinite;
transition: all 0.56s ease;
}
.machine-item-loader__cover .machine-item-loader__loader {
background: linear-gradient(
to right,
transparent 20%,
theme(backgroundColor.secondary.50) 50%,
transparent 80%
);
}
@keyframes loader {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}

38
pkgs/webview-ui/app/src/routes/machines/list.tsx
View File

@@ -137,18 +137,36 @@ export const MachineListView: Component = () => {
<Switch>
<Match when={inventoryQuery.isLoading}>
{/* Loading skeleton */}
<div>
<div class=" m-2 shadow-lg">
<figure class="pl-2">
<div class=" size-12"></div>
</figure>
<div class="">
<h2 class="">
<div class=" h-12 w-80"></div>
</h2>
<div class=" h-8 w-72"></div>
<div class="grid grid-cols-4"></div>
<div class="machine-item-loader">
<div class="machine-item-loader__thumb-wrapper">
<div class="machine-item-loader__thumb">
<div class="machine-item-loader__loader" />
</div>
</div>
<div class="machine-item-loader__headline">
<div class="machine-item-loader__loader" />
</div>
</div>
<div class="machine-item-loader">
<div class="machine-item-loader__thumb-wrapper">
<div class="machine-item-loader__thumb">
<div class="machine-item-loader__loader" />
</div>
</div>
<div class="machine-item-loader__headline">
<div class="machine-item-loader__loader" />
</div>
</div>
<div class="machine-item-loader">
<div class="machine-item-loader__thumb-wrapper">
<div class="machine-item-loader__thumb">
<div class="machine-item-loader__loader" />
</div>
</div>
<div class="machine-item-loader__headline">
<div class="machine-item-loader__loader" />
</div>
</div>
</Match>
<Match