Loading page to improve the user experience

Hilla
1

good morning,
I do not like the way the components appear on the page (basically they pop out in a random order). I was thinking it d be better to display the entire page only after the rendering has finished. I was looking for a loading page mechanism in the vaadin doc. unfortunately i could not find anything.

How do you address such a problem? Should I implement myself the solution from scratch or there is a vaadin-ready solution?

Many thanks
Simone

2

It’s hard to say anything based on your description alone. It really depends on a variety of factors: which components you’re using, how you’re adding them, which layouts there are, how you’re populating the data, your network latency, DOM complexity, and so on. I don’t really even recognize this “pop out in a random order” behavior, although I’m sure it’s possible under some circumstances. I can’t think of an out of the box solution like what you’re proposing, but I’d recommend spending some time to understand the root cause of the behavior first and seeing if there’s something that could be done differently.

3

hi Olli, thanks for answering.

I have a vaadin grid containing multiple rows, in each row a render function must be executed for generating complex components (couple of calls).
Depending on the retrieval time of the calls some components (rows) can be displayied before than others. Basically the random order of the rows rendering is due to the different data retrieval times.

The graphical result (as you can imagine) is - optically - a little flashy and not pleasent at all.

In the hilla doc i could not find any solution for this.

I found a react-ready solution
https://react.dev/reference/react/Suspense
which seems to be very elegant. Unfortunately in my vaadin app is not effective.

I have developed a my own workaround to set a loading skeleton in each row:
https://www.npmjs.com/package/react-loading-skeleton
as a temporarly component as long as the data fetch in useEffect is running:

const [isLoading, setIsLoading] = useState<boolean>(false);
 useEffect(() => {
      setIsLoading(true);
      fetch-1(xyz)... fetch-n(xyz)
      setIsLoading(false);
    };
}, [mydata]);

not sure it is the best way to face such a issue

Thanks, Simone

4

Seems like a good approach to me.

5

React works this way intentionally as it is considered sort of best practice rendering a page. I.e. content is generated as soon as possible and not defined by the slowest thing. If you are loading multiple data from backend, i.e. having more than one useEffect hook there and then set signal or state based on fetched data, each time rendering is updated. React tries to be wise on this and update only the delta. This gives immediate feedback for the user that something is happening and you do not get feeling that application is getting stuck. You can make this different by fetching all data in one useEffect hook, which I think is what you were drafting in your code example. In that case if some of the data fetches is slow, it is preferable not to show empty UI, but initially render some placeholder element, show spinner or progress bar to indicate user that things are ongoing.