I'm trying to make a loading animation for a slider, but it isn't working. My structure is simple:
on page.ts i have my code like:

export default function Home() {
  const [artists, setArtists] = useState<Author[]>([]);
  useEffect(() => {
    getArtists().then((data: any) => setArtists(data));
  }, []);

  return (
<>
<Slider show={"artistProfile"} data={artists} />
<Slider show={"artistArts"} data={artists} />
<>
)
}

The server action request to the database was made in this page to prevent multiple requests. If I move the server action inside the component it will make some extra requests that I dont want to have.
I tried <Suspense>, didn't work,it didn't show anything on the screen. I tried to make a useState loading and to pass the loading state to the components like

const [loading,setloading] = useState(true)
...use effect code here...
setloading(false)
...........................................
return(
<Slider show={"artistArts"} data={artists} loadingState={loading} />
//...rest of the code
)

It isn't working as well. The loading is true permanently somehow.

Any idea about how to fix this?