nik/navidrome
1
0
Fork 0
mirror of https://github.com/navidrome/navidrome.git synced 2026-08-01 07:21:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): show the blurhash while an album cover loads

Browse Source
This commit is contained in:
Deluan 2026-07-23 21:02:29 -04:00
parent 2510b06c4d
commit adadec9070
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/src/album/AlbumGridView.jsx
View File

@ -24,6 +24,7 @@ import config from '../config'
import { DraggableTypes } from '../consts'
import clsx from 'clsx'
import { AlbumDatesField } from './AlbumDatesField.jsx'
import { BlurHashCanvas } from '../common/BlurHashCanvas'
const useStyles = makeStyles(
(theme) => ({
@ -143,11 +144,19 @@ const Cover = withContentRect('bounds')(({
return (
<div ref={measureRef} className={classes.coverContainer}>
<div ref={dragAlbumRef}>
<div ref={dragAlbumRef} style={{ position: 'relative' }}>
{imageLoading && record.blurHash && (
<BlurHashCanvas hash={record.blurHash} className={classes.cover} />
)}
<img
src={imgUrl || undefined}
alt={record.name}
className={`${classes.cover} ${imageLoading ? classes.coverLoading : ''}`}
style={
imageLoading && record.blurHash
? { position: 'absolute', left: 0, top: 0 }
: undefined
}
/>
</div>
</div>