I am developing an app with React Native using Expo, I have a large JSON file with about 250 arrays of data. Upon the user tapping to enter this page that displays the data, it takes about 5-8 seconds to load, which I feel is too long for the app to hang there while it loads. I would like to add that I am just starting to adventure into React Native, there are most likely a lot of things I have yet to discover.
- Apologies if this is a duplicate question I wasn't able to find a sound answer after doing some research.
Question
Can anyone recommend or demonstrate a better way of transitioning to the page, then display a Spinner
indicating the loading of the data, I was thinking possibly with an onComponentMount
however after testing it did not seem like much had changed. Can anyone also recommend a way to show a Spinner
whenever the user searches for something?
Code
import { Badge, Box, Button, Center, Divider, Heading, HStack, Input, ScrollView, Spinner, Text, } from "native-base"; import React from "react"; import quest from '../../assets/data/quests.json' type item = { id: string; name: string; task: { name: string; }; trader: { name: string; currency: { id: string; name: string; }; }; map: { id: string; name: string; raidDuration: string; players: string; bosses: { name: string; // spawnChance: string; // spawnTime: string; spawnLocations: { name: string; chance: Float32Array; }; }; }; objectives: { id: string; type: string; description: string; optional: boolean; }; experience: string; minPlayerLevel: string; factionName: string; }; export const TEST1 = ({ navigation }) => { const quest1 = require('../../assets/data/quests.json') const [searchValue, setSearchValue] = React.useState(""); console.log(quest) return (<ScrollView><Input m={5} type="text" variant={'rounded'} size={'lg'} value={searchValue} onChangeText={setSearchValue} placeholder="Search" /> {quest1 .filter((quest1: any) => quest1.title.match(new RegExp(searchValue, "i")) ) .map((quest1 : any) => { return (<> {searchValue === null ? <Spinner /> : null}<Center><Box m={5} w={"300px"} h={"200px"} bgColor={"gray.200"} borderRadius={"3xl"} shadow={"5"} key={quest1.id}><Box m={"2"} key={quest1.id}><Center><Heading>{quest1.title}</Heading><Divider /></Center><HStack mt={2} space={2}><Badge>Trader:</Badge><Text>{quest1.giver === 0 ? 'Prapor' : null }</Text><Text>{quest1.giver === 1 ? 'Therapist' : null }</Text><Text>{quest1.giver === 2 ? 'Skier' : null }</Text><Text>{quest1.giver === 3 ? 'Peacekeeper' : null }</Text><Text>{quest1.giver === 4 ? 'Mechanic' : null }</Text><Text>{quest1.giver === 5 ? 'Ragman' : null }</Text><Text>{quest1.giver === 6 ? 'Jaeger' : null }</Text><Text>{quest1.giver === 7 ? 'Fence' : null }</Text><Badge>Exp:</Badge><Text>{quest1.exp}</Text></HStack></Box><Button borderRadius={'full'} m={2} onPress={() => navigation.navigate("TASK Details", { taskName: quest1.title, traderName: quest1.giver, //traderCurrency: tasks.trader.currency.name, //mapId: tasks.map?.id, //mapName: tasks.map?.name, //mapRaidDuration: tasks.map?.raidDuration, //mapPlayers: tasks.map?.players, //mapBosses: tasks.map?.bosses, taskObjectives: quest1.objectives, taskExp: quest1.exp, //mapBossLocation: tasks.map?.bosses?.spawnLocations, }) }> Details</Button></Box></Center></> ); })}</ScrollView> ); };