Fixed Annotation component Layout shift

evidence-dev / evidence

Business intelligence as code: build fast, interactive data visualizations in pure SQL and markdown

https://evidence.dev

MIT License

4.47k stars 215 forks source link

Fixed Annotation component Layout shift #2761

Closed kwongz closed 1 week ago

kwongz commented 1 week ago

Description

Original Bug: https://sf311.evidence.app/neighborhoods/OUTER%20SUNSET/

{114A2F83-3E59-4DD0-8D15-E9BAA8922CE7}

{E73CD15C-1406-41D3-BBB0-A0B01052E3FD}

Before:

Annotation deferring to default skeleton when loading in data, causing double loading skeletons to appear

{5FBE3589-D6D1-487E-A94D-1471064E6DC4}

{87CDD826-356F-453C-B562-D78B941EE35C}

{BDB5B5FE-69A2-4CC7-9C5C-CE153EF662F9}

{546B62F7-70F8-4C1F-8714-2FA1E4542818}

After:

Added custom skeleton in annotation components to remove this behavior

{7851A5BD-F437-4979-94DD-4D8245B24CEC}

{1D27547E-9B5B-49FD-9C32-02F2A19BE68C}

Checklist

[x] For UI or styling changes, I have added a screenshot or gif showing before & after
[x] I have added a changeset
[ ] I have added to the docs where applicable
[ ] I have added to the VS Code extension where applicable

changeset-bot[bot] commented 1 week ago

🦋 Changeset detected

Latest commit: 516aa91c31d0df5cf4966dcb4e16e6eb6218b5e8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages

| Name | Type | | ----------------------------- | ----- | | @evidence-dev/core-components | Patch | | my-evidence-project | Patch | | e2e-prerender | Patch | | e2e-spa | Patch | | e2e-themes | Patch | | @evidence-dev/components | Patch | | evidence-test-environment | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

kwongz commented 1 week ago

Looks like the annotation is still occupying a space when placed in a grid formation

Before:

{14C05EB4-EEB7-4BE1-8E1D-F0D6B63AEBB3}

After:

{23DCA695-C81B-4942-B88A-124FD1AFCA0D}

kwongz commented 1 week ago

No More Layout shift

https://www.loom.com/share/533655bf94e6479482dddbeac346662d?sid=4a58dd53-393e-4b62-aed3-82945c738fe0

hughess commented 1 week ago

1 thing I think is worth checking - are the annotation components still reactive to changes in data?

I think we had that problem before changing them to QueryLoad, so just want to make sure we aren't regressing that

kwongz commented 1 week ago

Annotations accepting Data from dropdown

kwongz commented 1 week ago

Hi @hughess, sorry for the miscommunication, Annotations accepting dynamic data is working alongside the layout shift fix. If this looks good its ready to merge.

Thanks!

Dynamic data w/ Annotation + Dropdown

https://www.loom.com/share/1a350c9ba66643bdaceefc4d91de94de?sid=cd2ec098-b4e1-482a-b7c8-522a65fde27d