Hello,
I am trying to create a simple loading component with loading.tsx in App Router, but I have a trouble with useEffect.

Here's my loading component, which will be used in the loading.tsx

"use client"

import { useState, useEffect } from "react"
import { Battery0BarRounded,
    Battery1BarRounded,
    Battery2BarRounded,
    Battery3BarRounded,
    Battery4BarRounded,
    Battery5BarRounded,
    Battery6BarRounded,
    BatteryFullRounded,
} from "@mui/icons-material";
import { indigo } from "@mui/material/colors";

export default function LoadingRecharge() {

    const [batteryState, setBatteryState] = useState<number>(0);

    useEffect(() => { 
        const toSetInterval = setInterval(() => {
            setBatteryState((prev) => {return ((prev + 1) % 8);})
        }, 100);

        return (() => {
            clearInterval(toSetInterval);
        });
    }, []); 

    let battery: React.ReactNode;

    switch (batteryState) {
        case 0:
            battery = <Battery0BarRounded sx={{color: indigo[50], width: "100%", height: "100%"}} />
            break;
        case 1:
            battery = <Battery1BarRounded sx={{color: indigo[50], width: "100%", height: "100%"}} />
            break;
        case 2:
            battery = <Battery2BarRounded sx={{color: indigo[50], width: "100%", height: "100%"}} />
            break;
        case 3:
            battery = <Battery3BarRounded sx={{color: indigo[50], width: "100%", height: "100%"}} />
            break;
        case 4:
            battery = <Battery4BarRounded sx={{color: indigo[50], width: "100%", height: "100%"}} />
            break;
        case 5:
            battery = <Battery5BarRounded sx={{color: indigo[50], width: "100%", height: "100%"}} />
            break;
        case 6:
            battery = <Battery6BarRounded sx={{color: indigo[50], width: "100%", height: "100%"}} />
            break;
        case 7:
            battery = <BatteryFullRounded sx={{color: indigo[50], width: "100%", height: "100%"}} />
            break;
        default:
            break;
    }
    
    return (
        <>
            {battery}
        </>
    );
}

The useEffect only work once, the first time it's loaded. It doesn't work anymore even though the page is refreshed or the server is restarted. I tried changing loading.tsx to a client component but it doesn't work. Is this happening because Next.js cache component?