Reading a 92 byte CSV file takes 15–20 seconds to process

I'm working on an Angular app and trying to read and parse a simple CSV file that is only 92 bytes. Surprisingly, the upload and processing takes around 15 to 20 seconds, even for such a tiny file.

Here's the function I'm using:

upload() {
const fileInput = document.createElement("input");
fileInput.type = "file";
fileInput.accept = ".csv";
this.isLoading = true;

fileInput.addEventListener("change", (event) => {
const target = event.target as HTMLInputElement;
if (target.files?.length) {
const file = target.files[0];
this.processUploadedFile(file);
}
});

fileInput.click();
}

private processUploadedFile(file: File) {
this.uploadedFileName = file.name;

if (file.type === "text/csv" || file.name.endsWith(".csv")) {
const reader = new FileReader();
reader.onloadend = (e) => {
const contents = e.target?.result as string;
if (contents) {
this.parseCSVData(contents);
}
};
reader.readAsText(file);
} else {
this.toast.danger("Please upload a valid CSV file.");
}
}

private parseCSVData(csvData: string) {
const lines = csvData.split("\n").filter((line) => line.trim() !== "");
const parsedData: Product[] = lines.slice(2).map((line, index) => {
const values = line.split(";");
return {
position: index + 1,
height: parseInt(values[0]) || 0,
diameter: parseInt(values[1]) || 0,
li: parseInt(values[2]) || 0,
lt: parseInt(values[3]) || 0,
};
});

if (parsedData.length) {
this.dataSource = parsedData;
}
this.isLoading = false;
}


I've tried:

• Using FileReader.readAsText() as shown above
• Switching to PapaParse, but the delay still happens
• Confirmed the CSV file is only 92 bytes, with just 3 lines of simple numeric data
• Verified the browser's performance tab (no major CPU or memory usage)
• Tried on different browsers (Chrome, Edge) — same result

Continue reading...