I am currently developing an application where users can choose stores and save them to their profile. The user authentication is managed through Google Firebase, which handles the login process. When a user accesses the profile screen, the data is retrieved from Firebase and displays the name along with the selected stores.
I have a flatlist of all the stores that are loaded locally (hardcoded), containing a list of shops that users can select or deselect. If a store is selected, the background color changes to indicate its selection. When loading from Firebase, any previously selected stores should also reflect this change in background color.
const selectStore = (index) => {
const data = [...stores];
data[index].selected = !data[index].selected;
store(data);
};
Upon revisiting the screen, the data is fetched from Firebase and displayed to the users. However, there is an issue where the screen loads faster than it can render all the Firebase data. As a result, only the list of stores is displayed initially, and the selections become visible only after refreshing the screen. I aim to ensure that sufficient time is given for all data to be loaded before setting the page to true.
To retrieve the current user's logged-in information, I utilize the following code snippet:
useEffect(() => {
setLoading(true);
var user = firebase.auth().currentUser;
if (user) {
fetchUser(user.uid);
} else {
alert("If you see this message, something has gone wrong!");
}
}, []);
In the Firebase collection, various user data is stored, including the selected stores as 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 displaying the user information, a loading indicator appears when loading is true. Then, it only shows the first and last names without selecting the stores. How can I address this issue effectively? I hope my question is clear enough.