react-native renders much faster than it can load data from firebase

I am working on an application that people can select stores and save it to their profile. I am using google firebase authentication to handle the users that log in. when a user visits the profile screen it will load the data from the firebase. show the name and the selected stores.

I have flatlist of all the stores which is loaded locally (hardcoded), its a list of shops that people and select and de-select. if selected the background of that item will change into another color indicating it has been selected. when loading from the firebase if any of this store are selected it will have to change the background.

  const selectStore = (index) => {
    const data = [...stores];
    data[index].selected = !data[index].selected;
    store(data);
  };

when they visit the screen for the second time, it will load the data from firebase and display it to the users. The problem is the screen is loaded much faster before it can render all the data from the firebase, it will display the name and everything but when it gets to the selected stores it will load the page faster than it will render the data, thus showing just a list of stores even if u have selected some if I refresh the screen then this time it will show the currently selected stores. I want to make sure before loading is set to true it has some time to correctly load all the data.

I use the following to get the current user logged in info:

useEffect(() => {
    setLoading(true);
    var user = firebase.auth().currentUser;
    if (user) {
      fetchUser(user.uid);
    } else {
      // No user is signed in.
      alert("if you see this message something has gone wrong!");
    }
  }, []);

then I have a collection made in firebase to save some of the users data there inclduing the selected stores which is an array:

  const fetchUser = async (userId) => {
    const userRef = db.collection("users").doc(userId);
    const doc = await userRef.get();
    if (!doc.exists) {
      console.log("No such user!");
    } else {
      if (doc.data().fname.length === 0) {
        setUseFirstName("");
        setUseLastName("");
        setShopList([]);
      } else {
        setUseFirstName(doc.data().fname);
        setUseLastName(doc.data().lname);
        setShopList(doc.data().supermarks);
        for (let i = 0; i < shopList.length; i++) {
          let index = shopList[i].id;
          selectStore(index - 1);
        }
      }
      setLoading(false);
    }
  };

when I want to display the info it will show the loading indicator if loading is true, it will then just publish the first name and last name it doesnt select the store. How can I do that? is my question clear enough?

from react-native renders much faster than it can load data from firebase