Skip to content

Commit aa16129

Browse files
Merge pull request #63 from ISISComputingGroup/only_update_beamimage_every_5s
only update beam info image every 5s
2 parents 67cbabf + 19c23b7 commit aa16129

File tree

1 file changed

+10
-2
lines changed

1 file changed

+10
-2
lines changed

app/wall/components/ShowHideBeamInfo.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
import Image from "next/image";
2+
import { useState } from "react";
23

34
export default function ShowHideBeamInfo() {
5+
const [date, setDate] = useState<number>(Date.now());
6+
7+
setInterval(() => {
8+
// Update the date, used by the beam image to get a fresh image, every 5 seconds so we're not constantly reloading the image on every render.
9+
setDate(Date.now());
10+
}, 5000);
11+
412
return (
513
<div id="beampic" className="flex flex-col items-center justify-center">
614
{" "}
@@ -11,11 +19,11 @@ export default function ShowHideBeamInfo() {
1119
Show/hide beam info
1220
</h3>
1321
<Image
14-
src={`https://www.isis.stfc.ac.uk/Gallery/beam-status/ISIS_Status.jpg?t=${Date.now()}`}
22+
src={`https://www.isis.stfc.ac.uk/Gallery/beam-status/ISIS_Status.jpg?t=${date}`}
1523
alt="beam info"
16-
className="w-auto"
1724
height={600}
1825
width={600}
26+
suppressHydrationWarning // needed to avoid the server-side rendering hydration warning because the "date" variable will be further ahead on the client than the server.
1927
/>
2028
</span>
2129
</label>

0 commit comments

Comments
 (0)