Why is this (async?) fetch blocking my application?

[CamilleScholtz]

When the fetch is running, my whole application is unresponsive. Am I doing something wrong?

	x-data="{
		fetched:   false,
		searching: false,

		init() {
			$watch('searching', async (value) => {
				if (!this.fetched) {
					fetch('/index.json')
						.then((response) => response.json())
						.then((data) => {
							// Adding data to Minisearch
							$store.search.addAll(data);
							this.fetched = true;
						});
				}
			});|
		}

[ekwoka]

Can you show a demo of it actually blocking?

https://awesomealpine.com/play can help.

This shouldn't have any issues.

Do you need a watch?

What is the use of watch here?

[CamilleScholtz]

I was loading a gigantic json file, I think that was causing lag rather than async not working. Switched to a different solution and that fix my problem!

[ekwoka]

The parsing of the JSON itself would happen on the main thread and could result in dropped frames.