Performance issues

[NicMcPhee]

Slow Functions:

• [ ] Adding a item to the pantry
• [ ] Loading pantry and product lists

This is an epic.

[OllieWillette667]

Is this also an issue in Acerinox code? I think it is but not sure.

[jpwalbran]

The loading time for the pantry/product list is definitely a known issue, I don't think we have the same issues with adding to the pantry.

[jpwalbran]

Running google chrome's Lighthouse analysis on the production build (ng serve --configuration production) of the current codebase gives a performance score of 90, which is in the green, if only barely.

The main places where the app failed in this metric were text compression and excessive DOM size.

Due to the way that we create the displayed items for the component templates, I don't know how much we can reduce the DOM size, so that might have to just be the way things are in regards to that particular warning. My understanding is that we would enable text compression on the droplet, and not within angular or javalin, so I think it's also probably safe to mostly ignore that flag for now, though that is a setting we might want to configure on the droplet when we're ready for deployment.

While it's true that the lighthouse analytics show that our app is supposedly fine, the main issue that we're having (that we attribute to suboptimal performance) is that we're generating the DOM contents based off of data gotten from the database, which isn't loaded until some amount of time after the DOM has been rendered. Between the time that the component (and therefore the DOM) initially renders, and the time that the component gets the data from the database, the page gives an error, which then goes away as soon as the data loads from the database.

While I don't think it's feasible to reduce the time it takes for the page to get the data over the network to unnoticeable (especially on slow networks, or as the amount of data that gets sent increases), I think that we can alleviate the flashing error message by changing the sequencing of the page rendering, so that the page doesn't load until it's received all of the data from the database, possible implementations of which are discussed in this stackoverflow post. I'm personally partial to the suggestion where we provide the products/pantry/shopping list data to the component from a separate service, as discussed in the comments of the question.