async function fetchWishes(wishlistId: string) {
    const response = await getAllWishes(wishlistId); // Server actions blocking ??
    if (!response.isSuccessful) {
        toast({...});
        return [];
    }

    return response.data;
}


export default function WishesList({ wishlistId }: WishesListProps) {
    const [loading, setLoading] = useState<boolean>(true);
    const [wishes, setWishes] = useState<TWish[]>([]);

    useEffect(() => {
        const fetchData = async () => {
            try {
                // call to the blocking function
                const fetchedWishes = await fetchWishes(wishlistId); 
                setWishes(fetchedWishes);
            } catch (error) {
                toast({...});
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, []);

        return (
             <>    
               {!loading ? (
                  wishes?.length > 0 ? (
                    wishes.map((wish) => (...)
                   ) : (
                     <div className="...">
                        <p className="...">
                          Start adding wishes now! 🌟
                        </p>
                      </div> 
                   )
              ) : (
                 <SkeletonPage />
                )}
             </>
        )
}

The first Picture is when I use the Link to navigate between my routes, the setLoading(false) is never set cause the server actions is called but is indefinitely waiting

The second pic is when I directly use an anchor tag instead to navigate