How to run script before page rendering

[cold scarab]

I've an issue in my project
I added a component in astro file

...
<div id="commit-history-container" class="mt-4 overflow-hidden transition-all duration-300 max-h-0">
<CommitHistory client:load/>
</div>
...

and add initialize function to initialize state variable that will be used in commitHistory component.

<script>
import {initializeProjectState} from ...
document.addEventListener("astro:page-load", () => {
initializeProjectState();
...
}
</script>

in CommitHistory.jsx file
...
useEffect(() => {
const addMaintainerBadge = () => {
const configData = loadConfigData();

  if (configData) {
    const authors = configData.authorGithubNames.map(name => name.toLowerCase());
    setAuthors(authors);
  } else {
    console.log("Can not read config data.");
  }
}
addMaintainerBadge();

}, []);
...

as you can see in CommitHistory component, I initialize authors by using loadConfigData function and those configData is initialized by running initializeProjectState function.
but when I run the project, configData is initialized but in the commithistory component, configdata is undefined

I think this is because CommitHistory component is rendered before running initialize function

how can I solve this?

[hidden sierra]

Hi @cold scarab. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

It seems like you're trying to run some code before the page is fully rendered. In Astro, you can use the astro:before-preparation event to execute code before the content is loaded. This event fires at the beginning of the preparation phase, after navigation has started but before content is loaded.

Here is an example of using the astro:before-preparation event:

<script is:inline>  
  document.addEventListener('astro:before-preparation', event => {    
    const originalLoader = event.loader;    
    event.loader = async function() {      
      const { initializeProjectState } = await import('./yourfile.js');      
      initializeProjectState();      
      await originalLoader();      
    };  
  });
</script>

In this example, the initializeProjectState function is called before the content is loaded. This might help you ensure that your configData is initialized before the CommitHistory component is rendered.

Please replace './yourfile.js' with the actual path to the file where initializeProjectState is defined.

You can find more information about this in the Astro documentation (https://docs.astro.build/en/guides/view-transitions/#astrobefore-preparation).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@cold scarab kapa.ai is still learning and improving, please let us know how it did by reacting below

[cold scarab]

@hidden sierra
explain about the event.loader

[hidden sierra]

Let me check the knowledge base for you. One moment! :books:

---

The event.loader is an attribute of the astro:before-preparation event in Astro's View Transitions client API. It represents the implementation of the following phase in the navigation process, which is loading the next page.

This implementation can be overridden to add extra behavior. For example, you can use it to show a loading spinner before the content is loaded and stop it immediately after loading. Here's an example:

<script is:inline>  
  document.addEventListener('astro:before-preparation', event => {    
    const originalLoader = event.loader;    
    event.loader = async function() {      
      const { startSpinner } = await import('./spinner.js');      
      const stop = startSpinner();      
      await originalLoader();      
      stop();    
    };  
  });
</script>

In this example, event.loader is overridden with a new function. This new function first starts a spinner, then calls the original loader function to load the next page, and finally stops the spinner.

You can find more information about event.loader in the Astro documentation (https://docs.astro.build/en/reference/api-reference/#loader).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: