Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 08:58:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 111

Add loading placeholder animation and add it to custom software icons loading state (#33064)

Browse source
This commit is contained in:
Luke Heath 2025-09-18 08:48:42 -05:00 committed by GitHub
parent 44eeb80988
commit 4bf3c5136a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 22 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/pages/SoftwarePage/components/icons/SoftwareIcon/SoftwareIcon.tsx
View file

@ -58,7 +58,7 @@ const SoftwareIcon = ({
if (isApiUrl) {
if (isLoading) {
// Return empty div while loading custom icon so component size doesn't jump
return <div className={classNames} />;
return <div className={classNames.concat(" loading-placeholder")} />;
}
if (currentCustomIconBlob) {
// Uses custom icon blob from API if fetch succeeded

21
frontend/styles/global/_animations.scss
View file

@ -37,4 +37,25 @@
opacity: 1;
transform: translateX(0);
}
}
.loading-placeholder {
$from: #f5f5f5;
$to: scale-color($from, $lightness: -10%);
height: 100%;
width: 100%;
background: linear-gradient(-90deg, #efefef 0%, #fcfcfc 50%, #efefef 100%);
background-size: 400% 400%;
animation: pulse 1s ease-in-out infinite;
@keyframes pulse {
0% {
background-position: 0% 0%
}
100% {
background-position: -135% 0%
}
}
}