Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add placeholders or skeletons to components #1300

Open
archiewood opened this issue Nov 2, 2023 · 6 comments
Open

Add placeholders or skeletons to components #1300

archiewood opened this issue Nov 2, 2023 · 6 comments
Labels
components Components that are not data viz data viz Charts, tables and other viz

Comments

@archiewood
Copy link
Member

Steps To Reproduce

  1. Start a fresh Evidence project and wait for the browser to open
  2. Observe the browser

Expected Behavior

There is some static image or placeholder of a chart visible when the page is loading

Actual Behaviour

Some components are not visible while the page loads.
This includes the Charts and the Query Viewer, but not the DataTable, Value or BigValue

CleanShot 2023-11-02 at 16 16 59

@archiewood archiewood added bug Something isn't working to-review Evidence team to review labels Nov 2, 2023
@archiewood archiewood changed the title Some component are blank before loading Some component are blank while page loads Nov 2, 2023
@mcrascal mcrascal added components Components that are not data viz data viz Charts, tables and other viz and removed bug Something isn't working to-review Evidence team to review labels Nov 2, 2023
@mcrascal mcrascal changed the title Some component are blank while page loads Add placeholders or skeletons to components Nov 2, 2023
@mcrascal
Copy link
Member

mcrascal commented Nov 2, 2023

I don't think this is a bug, we just don't have skeleton states in most (all) of the components, given how fast they are already. @ItsMeBrianD has done some work on this on next.

@archiewood
Copy link
Member Author

archiewood commented Nov 2, 2023

I don't understand why the DataTable loads instantly in the initial HTML but the QueryViewer does not (for example)

CleanShot 2023-11-02 at 17 21 45

@csjh
Copy link
Contributor

csjh commented Nov 2, 2023

I think that's because we default to not showing QueryViewer, so it isn't SSR'd

@mcrascal
Copy link
Member

mcrascal commented Nov 2, 2023

That's right -- you could set it to be included by default during SSR but then it would jank off the page for most folks who have queries hidden.

@mcrascal
Copy link
Member

mcrascal commented Nov 2, 2023

Queryviewer is a bit of a special case, but SSR'ing the charts would definitely be a good improvement

@csjh
Copy link
Contributor

csjh commented Nov 2, 2023

ECharts SSR'd charts are currently more of an embedded thing (i.e. something you would return from an endpoint and you link to it as a .png or such) but apache/echarts#18334 could be a very interesting feature to keep an eye on

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
components Components that are not data viz data viz Charts, tables and other viz
Projects
None yet
Development

No branches or pull requests

3 participants