Route

[safe swallow]

OnClicking it should go to some route but it is waiting for all api calls in page then after that it is going to the route how we can fix this issue immediately it should go to the route

[plush jay]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[turbid smelt]

Client side fetcing

If you fetch in a useEffect

Or you can surround your component with Suspense

and then have a fallback

Can you share some of the code

[safe swallow]

Like there is one component where we are hitting get api so for 10 items we are fetching 10 times but when I click on some option in sidebar it will go to that route after finishing all 10 api calls

[turbid smelt]

Can I see the component

[turbid smelt]

Try this

[safe swallow]

It is not working. I want when I click on some button with router.push("") it should go to that route what is happening is it is waiting for all api calls to be finish then it is going to that route

const List = ({ item }: { item: Spaces }) => {

const { apiCalls } = useStore(useRerenderComponent, (state) => state);

const SpaceAssigned = async () => {
if (userRerender === '') {
setLoading(true);
}
try {
const payload = {
space_ids: [item.id],
};
const res = await CustomFetch(spaceAssigned, {
method: 'POST',
body: JSON.stringify(payload),
});
setLoading(false);

  setUsers(
    res.map(
      (UsersItem: SpacesType) => UsersItem.users
      //       {
      // console.log("props.users",UsersItem.users);

      //         UsersItem.users.filter(
      //           (users1: UsersAssignedTypes) => !users1.is_organization_user
      //         )
      //         }
    )
  );
} catch (error) {
  console.error(error);
} finally {
  setLoading(false);
}

};
useEffect(() => {
SpaceAssigned();
}, []);

return (<div/>)
export default List

in this if I am having like 10-20 items it is taking so much time to change the route

router.push() is in different component sidebar

[turbid smelt]

can you add syntax highlighting @safe swallow