Best way to load data from API on launch

[wispy fiber]

So i have a simple app i need to have it call to the API and show the returned data when the app opens if possible i want to try to show a loading screen until it is finished what would be the best way of doing this i am pretty new to how ElectronJS works

[real axle]

what api?

how familiar you with nodejs/js?

[wispy fiber]

its the https://rocketlaunch.live api and i know a bit about nodejs/js just not sure how to get a seperate js file running with electron right before the page loads as i dont want to show the page until the data is loaded

i already understand the API

just need help getting it pulled into electron and able to show it in the html

[real axle]

you can send message from page when to show it

for electron it is same way you do in nodejs/js

api request

[wispy fiber]

i get that but how do i get the data from the main process to the render process

[real axle]

with ipc

https://www.electronjs.org/docs/latest/tutorial/ipc

i think Pattern 2 is a good way

[wispy fiber]

thank you sorry just new to the electron stuff not 100% understanding yet

[wispy fiber]

im trying to use the main to renderer one but something aint working and idk what im missing

preload.js

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('API', {
  LoadData: (callback) => ipcRenderer.on('loadData', callback)
})

index.js

const loading = document.getElementById("loading")
const launchName = document.getElementById("nextLaunchName")

window.API.LoadData((event, value) => {
    launchName.innerHTML = value;
})

main.js

// Import the required modules
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const axios = require('axios')

// Create a new window and load the index.html file
async function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 1250,
    height: 703,
    resizable: false,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });

  console.log("test")
  const res = await axios.get("https://fdo.rocketlaunch.live/json/launches/next")
  const result = res.data

  mainWindow.webContents.send("loadData", result)

  mainWindow.loadFile('home.html');
}

// Initialize the app and create the window when the app is ready
app.whenReady().then(async () => {
  createWindow();

  // Quit the app when all windows are closed
  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
      app.quit();
    }
  });
});

// Activate the app when no windows are open
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

home.html this is the script i put in and is in correct location

<script src="./index.js"></script>

[real axle]

probably because you send message before listener is added

[wispy fiber]

how do i make sure to send it after then?

[real axle]

send message from renderer

or use pattern 2

[wispy fiber]

pattern 2 requires the user to interact tho from what it looks like to me and i want it to just load the data with no interaction

[real axle]

it doesnt

[wispy fiber]

then i dont understand it enough

[real axle]

pattern 2 ask main to get data

thats it

and getting response

[wispy fiber]

how does it know when to ask is what im confused on

[real axle]

you can ask as soon as your js executed

or from preload

when preload executed

[wispy fiber]

i can try but i feel i will do it wrong considering the example is based on a user click so its hard to understand for my situation

[real axle]

its just an example

[wispy fiber]

still aint working idk tbh im doing something wrong

i followed the example as close as possible considering it does not match my situation

[real axle]

i need your code

you also can use console.log to see whats happens

[wispy fiber]

nvm i got it finally sorry for being so confused just its all new to me