I'm in the process of finding a way to prevent my page from loading until my fetch task is completed. I'm facing some issues that need to be addressed:
- I have to re-fetch the data each time because I can't reuse the same data. (Changing views after it's loaded works, but reloading a route causes problems)
- Anchor links are not functioning properly. For instance, if I have an anchor link #about located below some featured items, the #about section will be shifted lower because the featured items have just finished loading. It's challenging to implement a skeleton loading system as the number of items is dynamic.
Here is the current code I'm working on:
data() {
return {
collections: [],
items: []
}
},
methods: {
async fetchCollections() {
const res = await fetch('http://localhost:4000/collections')
return await res.json()
},
async fetchItems() {
const res = await fetch('http://localhost:4000/items')
return await res.json()
}
},
async created() {
this.collections = await this.fetchCollections()
this.items = await this.fetchItems()
}
I acknowledge that this approach may not be considered best practice and I might be making mistakes. Please offer constructive feedback rather than criticism, as I'm new to Vue and still improving my skills with JavaScript.
In summary
The desired outcome is for the page to complete loading only once the backend data has been retrieved.
Currently, the content pops up after a brief delay following the initial site load, which is not the intended behavior.