in my +layout.server.js I have this API call that is executed onMount:
async function loadCustomerData() { if (loading) return; loading = true; const response = await fetch(`/api/customers/${$page.data.id}`); const data = await response.json(); customer.set(data.customer); console.log($customer); loading = false;}It fetches data files from an erp and parse them into a json object. The files are not very large but all together slow down the page display.For example my page has tabs, Customer details and customer's notes. The details won't be visualized until the notes are parsed because they're in the same call. I want to avoid making separate api calls if possible, because the files are linked together and I'd need to read the same file multiple times.How can I edit so that when a file is parse, it sends the respnse so that it can be viewed while the others are parsing?
export async function GET({ params }) { try { // Import Cusomers const filePathGen = path.resolve("src/db/gen.dat"); const fileContentGen = fs.readFileSync(filePathGen, "utf8"); const parsedDataGen = Papa.parse(fileContentGen, { header: true, skipEmptyLines: true, }); let selectedCustomer = parsedDataGen.data.find( (item) => item.COD_CLIFOR === `${params.id}` ); // import 'Notes' object const filePathNote = path.resolve("src/db/note.dat"); const fileContentNote = await fs.promises.readFile(filePathNote, "utf8"); const parsedDataNote = Papa.parse(fileContentNote, { header: true, skipEmptyLines: true, }); const righeNote = parsedDataNote.data.filter( (e) => e.COD_CLIFOR === selectedCustomer.COD_CLIFOR ); // Add 'Notes' rows to object selectedCustomer.NOTE = righeNote; (...other .dat files) return json({ customer: selectedCustomer }); } catch (error) { console.error(error); return new Response("Get customer details: API Error"); }}