fix flickering when changing country or leaderboard

denniske · Nov 5, 2024 · 4240992 · 4240992
1 parent f6430d4
commit 4240992
Showing 1 changed file with 18 additions and 6 deletions.
diff --git a/app/src/app/statistics/leaderboard.tsx b/app/src/app/statistics/leaderboard.tsx
@@ -197,6 +197,7 @@ function Leaderboard({ leaderboardId }: any) {
     const auth = useSelector((state) => state.auth!);
     const [refetching, setRefetching] = useState(false);
     const leaderboardCountry = useSelector((state) => state.leaderboardCountry) || null;
+    const [loadedLeaderboardCountry, setLoadedLeaderboardCountry] = useState(leaderboardCountry);
     const insets = useSafeAreaInsets();
     const flatListRef = React.useRef<FlatListRef>(null);
     const [contentOffsetY, setContentOffsetY] = useState<number>();
@@ -261,6 +262,8 @@ function Leaderboard({ leaderboardId }: any) {
 
                 calcRankWidth(contentOffsetY);
 
+                setLoadedLeaderboardCountry(leaderboardCountry);
+
                 // console.log('APPENDED', list.current);
                 // console.log('APPENDED', params);
                 return data;
@@ -341,11 +344,12 @@ function Leaderboard({ leaderboardId }: any) {
 
     const _renderRow = useCallback(
         (player: ILeaderboardPlayer, i: number, isMyRankRow?: boolean) => {
+            logPlayer('INIT', i, player);
             return (
                 <MemoizedRenderRow
                     player={player}
                     i={i}
-                    leaderboardCountry={leaderboardCountry}
+                    leaderboardCountry={loadedLeaderboardCountry}
                     isMyRankRow={isMyRankRow}
                     rankWidth={rankWidth}
                     myRankWidth={myRankWidth}
@@ -354,12 +358,12 @@ function Leaderboard({ leaderboardId }: any) {
                 />
             );
         },
-        [myRankWidth, rankWidth, leaderboardCountry]
+        [myRankWidth, rankWidth, loadedLeaderboardCountry]
     );
 
-    useEffect(() => {
-        setMyRankWidth(showMyRank ? (myRankPlayer?.rank.toFixed(0).length + 1) * 10 : 0);
-    }, [myRankPlayer, showMyRank]);
+    // useEffect(() => {
+    //     setMyRankWidth(showMyRank ? (myRankPlayer?.rank.toFixed(0).length + 1) * 10 : 0);
+    // }, [myRankPlayer, showMyRank]);
 
     const _renderHeader = () => {
         const players = getTranslation('leaderboard.players', { players: total.current });
@@ -566,6 +570,13 @@ interface RenderRowProps {
     scrollToMe: () => void;
 }
 
+function logPlayer(str: string, i: number, player: ILeaderboardPlayer, leaderboardCountry?: string | null) {
+    // if (i == 1 && player?.leaderboardId == 'rm_1v1') {
+    //     console.log(str.padEnd(8, ' '), 'ROW', i, player.rank, player?.name, player != null,
+    //         isCountry(leaderboardCountry), isCountry(leaderboardCountry) ? player?.rankCountry : player?.rank || i + 1);
+    // }
+}
+
 function RenderRow(props: RenderRowProps) {
     const { player, i, isMyRankRow, rankWidth, myRankWidth, onSelect, scrollToMe, leaderboardCountry } = props;
 
@@ -579,7 +590,8 @@ function RenderRow(props: RenderRowProps) {
 
     // console.log('Math.max(myRankWidth, rankWidth)', myRankWidth, rankWidth);
     // console.log('Math.max(myRankWidth, rankWidth)', Math.max(myRankWidth, rankWidth));
-    // console.log('RERENDER', i, player != null);
+
+    logPlayer('RENDER', i, player, leaderboardCountry);
 
     return (
         <TouchableOpacity style={[styles.row, rowStyle]} disabled={player == null} onPress={() => (isMyRankRow ? scrollToMe() : onSelect(player))}>