Add loading for initial state on graph#5448
Add loading for initial state on graph#5448bramkragten merged 14 commits intohome-assistant:devfrom timmo001:initial-loading
Conversation
timmo001
changed the title
| @property() protected _config?: GraphHeaderFooterConfig; | ||
| @property() private _coordinates?: any; | ||
| @property() private _coordinates?: number[][]; | ||
| @property() private _loadingInitialData: boolean = true; |
There was a problem hiding this comment.
Does this need to be a property? When coordinates changes it should update right?
It may not request an update if its set to undefined though. Not 100%. But you may not need this to be a property.
There was a problem hiding this comment.
Good point. Made a non-property
|
Can we give the spinner div the same height as the graph to prevent jumping? |
|
We should also not load new history data while another request is still running, we now start a new request every minute even if the old one is not finished. But that is for another PR. |
|
It works weird anyway, it will update when a property coincidentally ( |
|
OK done |
| height: 58px; | ||
| text-align: center; | ||
| display: flex; | ||
| height: 98px; |
There was a problem hiding this comment.
The height is not fixed, it is 1/5 of the width.
There was a problem hiding this comment.
You can work with margin-bottom: 20% and give the paper-spinner position: absolute;
|
OK that worked.
|
|
Looking good! Can we center the spinner vertically? |
Tried it, but the spinner seems to want to center itself in the card itself instead of its container |
|
@timmo001 Make the Spinner Container position relative and try again |
|
No change 😕
.spinner-container {
position: relative;
margin-bottom: 20%;
}
.spinner {
position: absolute;
top: calc(50% - 12px);
left: calc(50% - 12px);
}Gotta love css |
|
Instead of margin-bottom: 20% use padding. |
That did it. Cheers 🍻
That extra space above is from the entity section which uses 16px padding top and bottom |
|
Actually....
There done 😄 |
| @property() private _coordinates?: any; | ||
| @property() private _coordinates?: number[][]; | ||
|
|
||
| private _loadingInitialData: boolean = true; |
There was a problem hiding this comment.
Instead of doing this we should update the coordinates function. Instead of returning undefined when there is no state history we should return an empty array. That way we don't need an extra variable.
If _coordinates is undefined we know we haven't updated from the state history yet. But if the Length is of coordinates is 0 then no state history found
|
OK that's done. I also made the no history message match the height/position of the rest |
| return css` | ||
| paper-spinner { | ||
| position: absolute; | ||
| top: calc(50% - 28px); |
There was a problem hiding this comment.
You do realize this isn't the center of the container right? The center would be calc(50% - 14px).
There was a problem hiding this comment.
This takes into account half of the spinner size, otherwise, you get this:
Co-Authored-By: Bram Kragten <mail@bramkragten.nl>
4 participants
Proposed change
When loading history for the graph initially, there is a window of time where the graph states there is no state history, whilst the data is being loaded initially. This adds a spinner to be shown whilst this is loading.
This is only usually seen by the human eye when you have a lot of cards on a production server. This gif is using a setTimeout to slow this down as the local dev instance is much quicker.
Type of change
Checklist