Rockbox open source high quality audio player as a Music Player Daemon
mpris
rockbox
mpd
libadwaita
audio
rust
zig
deno
webui: fix infinite AlbumDetails re-render
+17
-11
+17
-11
webui/rockbox/src/Components/AlbumDetails/AlbumDetailsWithData.tsx
+17
-11
webui/rockbox/src/Components/AlbumDetails/AlbumDetailsWithData.tsx
···
1
-
import { FC, useEffect, useState } from "react";
1
+
import { FC, useEffect, useMemo, useState } from "react";
2
2
import AlbumDetails from "./AlbumDetails";
3
3
import { useNavigate, useParams } from "react-router-dom";
4
4
import { useGetAlbumQuery } from "../../Hooks/GraphQL";
···
16
16
id: id!,
17
17
},
18
18
});
19
-
const album = data
20
-
? {
21
-
...data.album!,
22
-
albumArt: data.album?.albumArt
23
-
? `http://localhost:6062/covers/${data.album?.albumArt}`
24
-
: "",
25
-
}
26
-
: null;
19
+
20
+
const album = useMemo(
21
+
() =>
22
+
data
23
+
? {
24
+
...data.album!,
25
+
albumArt: data.album?.albumArt
26
+
? `http://localhost:6062/covers/${data.album?.albumArt}`
27
+
: "",
28
+
}
29
+
: null,
30
+
[data]
31
+
);
32
+
27
33
useEffect(() => {
28
34
if (loading || !album) {
29
35
return;
···
48
54
}, [id]);
49
55
50
56
useEffect(() => {
51
-
if (loading || !tracks.length) {
57
+
if (!tracks.length) {
52
58
return;
53
59
}
54
60
getVolumes();
55
61
// eslint-disable-next-line react-hooks/exhaustive-deps
56
-
}, [tracks, loading]);
62
+
}, [tracks]);
57
63
58
64
function getVolumes() {
59
65
if (!tracks.some((track) => track.discnum === 2)) {