Kevin Powell - Community•11mo ago

What to do so that page loads when API calls are finished?

https://snazzy-tiramisu-4033f2.netlify.app/ My JS lags behind since it is dealing with API, and first thing that loads is just the regular HTML I have, and then it process the API. What to do so that it loads the finished page? I also think the way I setup my functions are slowing the code down, but I'm not sure. It goes something like this --->

let data;
async firstAPIFunction() {
//do something
data = firstAPIFunction.data;
secondAPIFunction();
}
let secondData;
async secondAPIFunction(){
  //use data to get secondData;
  //secondData = secondAPIFunction.data;
  //fill HTML with it
}

document.addEventListener('DOMContentLoaded', () => {
    firstAPIFunction();
    changeMoreCSSHTML();
})

function changeMoreCSSHTML() {
  //does something to CSS and HTML after API has finished
}

let data;
async firstAPIFunction() {
//do something
data = firstAPIFunction.data;
secondAPIFunction();
}
let secondData;
async secondAPIFunction(){
  //use data to get secondData;
  //secondData = secondAPIFunction.data;
  //fill HTML with it
}

document.addEventListener('DOMContentLoaded', () => {
    firstAPIFunction();
    changeMoreCSSHTML();
})

function changeMoreCSSHTML() {
  //does something to CSS and HTML after API has finished
}

You can check the actual code in the link of course.

11 Replies

glutonium•11mo ago

u can put a loading screen that's what every webpage does the way you'd do it

async function firstApi(){
    try{
        const res = await fetch();
        const data = await res.json();
        // manage data
     }catch(err){
        console.lor(err);
     }
}

async function secondApi(){
    try{
        const res = await fetch()
        const data = await res.json();
        // manage data
    }catch(err){
         console.log(err);
    }
}

async function fetchDatas(){
    loading(true);
    await firstApi();
    await secondApi();
    loading(false);
}

function loading(status){
    if(status){
        // show loading screen
    } else{
        // end loading
    }
}

async function firstApi(){
    try{
        const res = await fetch();
        const data = await res.json();
        // manage data
     }catch(err){
        console.lor(err);
     }
}

async function secondApi(){
    try{
        const res = await fetch()
        const data = await res.json();
        // manage data
    }catch(err){
         console.log(err);
    }
}

async function fetchDatas(){
    loading(true);
    await firstApi();
    await secondApi();
    loading(false);
}

function loading(status){
    if(status){
        // show loading screen
    } else{
        // end loading
    }
}

DovahOP•11mo ago

@glutonium I'm a bit confused and can't figure out how to apply that example into my code. 😦 Do I need to design loading screen? Just add massive blur? What is loading()?

glutonium•11mo ago

yes depends on your choice function that turns loading screen on or off

fgcazares•11mo ago

Why you need to read from an API everytime the site loads? Does the content change every hour or something like that?

capt_uhu•11mo ago

personally I always feel like a loading screen is a last resort. Is there some way you can rearrange the js so the api call happens sooner? Or move the api call into the HTML in a script tag?

glutonium•11mo ago

well in that regard what comes to me the very first is using the script tag within the head tag without the defer attribute the perhaps you can export the data and then within another script tag (with defer attr) , import the data and show it not sure about it tho

DovahOP•11mo ago

It shows time based on your coutry via your IP address. So when you first load the page, it needs to first read all those API calls to show your time. I can ofc just plant random placeholder numbers, but the "problem" is that background image also changes based on the time of the day and it is distracting and ugly if it changes after you are already on the page, instead of being ready when you load in. That is what I would love to know. I know for a fact that my JS code and function calling is sloppy and unefficient, I just don't know how to properpy rearange it. I'll look up the defer script part to see how it works. And maybe come back to the project once I know more about JS and proper function/API calling.

capt_uhu•11mo ago

outside the JS stuff maybe throw a more image appropriate background-color behind your full screen background-images. Right now you have a gray behind both the day and night images. Which doesn't feel native to either of the images. If you had for example a black-ish background-color behind the mostly black night image, the load in of that image wouldn't be as jarring.

Jochem•11mo ago

if all it does is show time based on IP, just show time based on the computer's local time?

DovahOP•11mo ago

It shows more info based on it if you click more. I linked the project. Also, it is a FrontEndMentor project that serves to practice API, so it is not for efficiency. xD You are right. I should do that. I'm just more focused on API/JS on this one, and I'm just doing HTML/CSS to be "Good enough". I should also just go and watch/read more JS tutorials/guides on how to properly write functions since I just know I'm slowing my code down a lot, even if it is not big. xD

capt_uhu•11mo ago

If you want to make it a JS thing maybe load the background images in JS so that they are ready for the browser to just drop in immediately when the background-image code gets added to the html?

Gaming

Programming

What to do so that page loads when API calls are finished?