web/src/app/mapfixes/[mapfixId]/page.tsx

@@ -1,6 +1,6 @@
 import Webpage from "@/app/_components/webpage";
 import { useParams, useNavigate } from "react-router-dom";
-import {useState} from "react";
+import {useState, useEffect} from "react";
 import { Link } from "react-router-dom";
 import { useAssetThumbnail } from "@/app/hooks/useThumbnails";
 
@@ -121,6 +121,15 @@ export default function MapfixDetailsPage() {
 
 	};
 
+	// cycle before and after images every 2 seconds
+	useEffect(() => {
+		const interval = setInterval(() => {
+			setShowBeforeImage((prev) => !prev);
+		}, 2000);
+
+		return () => clearInterval(interval);
+	}, []);
+
 	const handleCommentSubmit = async () => {
 		if (!newComment.trim()) {
 			return; // Don't submit empty comments
@@ -323,33 +332,6 @@ export default function MapfixDetailsPage() {
 										)}
 									</Box>
 
-									<Box
-										sx={{
-											position: 'absolute',
-											bottom: 16,
-											left: '50%',
-											transform: 'translateX(-50%)',
-											zIndex: 2,
-											display: 'flex',
-											flexDirection: 'column',
-											alignItems: 'center',
-											gap: 1,
-										}}
-									>
-										<Typography
-											variant="caption"
-											sx={{
-												color: 'white',
-												bgcolor: 'rgba(0,0,0,0.4)',
-												padding: '2px 8px',
-												borderRadius: 1,
-												backdropFilter: 'blur(2px)',
-											}}
-										>
-											Click to compare
-										</Typography>
-									</Box>
-
 									<Box
 										sx={{
 											position: 'absolute',
@@ -363,7 +345,6 @@ export default function MapfixDetailsPage() {
 												background: 'linear-gradient(rgba(0,0,0,0.02), rgba(0,0,0,0.05))',
 											},
 										}}
-										onClick={() => setShowBeforeImage(!showBeforeImage)}
 									/>
 								</Box>
 							</Box>