implemented loading animation during requests

This commit is contained in:
RaffaelW 2024-11-05 09:11:36 +01:00
parent b8b87db0f2
commit f0204c2477
6 changed files with 178 additions and 53 deletions

View file

@ -1,25 +1,27 @@
import {
showLoadingScreen,
showError,
hideLoadingScreen,
} from "./loading-screen.js";
const form = document.querySelector("form");
async function loadData() {
try {
const req = await fetch("/config", {
method: "GET",
});
if (!req.ok) {
throw new Error(`Response status: ${req.status}`);
}
const json = await req.json();
console.log(json);
return json;
} catch (error) {
console.log(error);
return null;
export async function loadData(timeout = null) {
const req = await fetch("/config", {
method: "GET",
signal: timeout !== null ? AbortSignal.timeout(timeout) : undefined,
});
if (!req.ok) {
throw new Error(`Response status: ${req.status}`);
}
const json = await req.json();
console.log(json);
return json;
}
export function writeDataToInput(data) {
console.log("write data", typeof data);
console.log("write data");
for (const [key, value] of Object.entries(data)) {
const element = document.querySelector(`[name=${key}]`);
console.log(key, element);
@ -34,7 +36,12 @@ export function writeDataToInput(data) {
form.dispatchEvent(new Event("change", { bubbles: true }));
}
const data = await loadData();
if (data !== null) {
showLoadingScreen("Konfiguration wird geladen...");
try {
const data = await loadData();
hideLoadingScreen();
writeDataToInput(data);
} catch (error) {
console.log(error.message);
showError("Die Konfiguration konnte nicht geladen werden.");
}