feat: scroll top globally on the case, only once

Author: kemuru

web/src/pages/Cases/CaseDetails/Overview/index.tsx

@@ -1,12 +1,11 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 
 import { useParams } from "react-router-dom";
 import { formatEther } from "viem";
 
 import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData";
 import { useVotingHistory } from "hooks/queries/useVotingHistory";
-import { useScrollTop } from "hooks/useScrollTop";
 import { getLocalRounds } from "utils/getLocalRounds";
 
 import { useCourtPolicy } from "queries/useCourtPolicy";
@@ -41,17 +40,12 @@ const Overview: React.FC<IOverview> = ({ arbitrable, courtID, currentPeriodIndex
   const { data: dispute } = useDisputeDetailsQuery(id);
   const { data: courtPolicy } = useCourtPolicy(courtID);
   const { data: votingHistory } = useVotingHistory(id);
-  const scrollTop = useScrollTop();
   const localRounds = getLocalRounds(votingHistory?.dispute?.disputeKitDispute);
   const courtName = courtPolicy?.name;
   const court = dispute?.dispute?.court;
   const rewards = useMemo(() => (court ? `≥ ${formatEther(court.feeForJuror)} ETH` : undefined), [court]);
   const category = disputeDetails?.category;
 
-  useEffect(() => {
-    scrollTop();
-  }, [scrollTop]);
-
   return (
     <>
       <Container>

web/src/pages/Cases/CaseDetails/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
 
 import { Route, Routes, useParams, Navigate } from "react-router-dom";
@@ -7,6 +7,7 @@ import { Card } from "@kleros/ui-components-library";
 
 import { Periods } from "consts/periods";
 import { VotingContextProvider } from "hooks/useVotingContext";
+import { useScrollTop } from "hooks/useScrollTop";
 
 import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 
@@ -43,10 +44,15 @@ const Header = styled.h1`
 const CaseDetails: React.FC = () => {
   const { id } = useParams();
   const { data } = useDisputeDetailsQuery(id);
+  const scrollTop = useScrollTop();
   const dispute = data?.dispute;
   const currentPeriodIndex = (dispute ? Periods[dispute.period] : 0) as number;
   const arbitrable = dispute?.arbitrated.id as `0x${string}`;
 
+  useEffect(() => {
+    scrollTop();
+  }, []);
+
   return (
     <VotingContextProvider>
       <Container>