feat: Improve insights overall loading state #28229
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Marked as WIP while I fix CI - it'll certainly break |
|
Size Change: +5 B (0%) Total Size: 1.18 MB ℹ️ View Unchanged
|
rafaeelaudibert
force-pushed
the
28172-improve-insight-loading-state
branch
from
3822319 to
531668a
Compare
📸 UI snapshots have been updated33 snapshot changes in total. 0 added, 33 modified, 0 deleted:
Triggered by this commit. |
rafaeelaudibert
commented
Feb 3, 2025
...__/scenes-app-insights-error-empty-states--estimated-query-execution-time-too-long--dark.png
Outdated
Show resolved
Hide resolved
rafaeelaudibert
commented
Feb 3, 2025
frontend/__snapshots__/scenes-app-insights-error-empty-states--long-loading--dark.png
Outdated
Show resolved
Hide resolved
rafaeelaudibert
force-pushed
the
28172-improve-insight-loading-state
branch
from
2dca437 to
822d62c
Compare
📸 UI snapshots have been updated14 snapshot changes in total. 0 added, 14 modified, 0 deleted:
Triggered by this commit. |
rafaeelaudibert
commented
Feb 3, 2025
Comment on lines
1
to
4
| /* TODO: Migrate this to a CSS variable (with a `bg-` Tailwind class) once @adamleithp finishes his Tailwind work */ | ||
| .insights-empty-state { | ||
| background-color: rgb(129 129 129 / 20%); | ||
| } |
There was a problem hiding this comment.
@adamleithp I'm expecting us to be able to use some kind of ´bg-gray-600/50` class once your TW4 changes are live, are we getting that?
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This PR modernizes the insight loading states across PostHog to be more visually lightweight and consistent with modern design patterns.
Key changes:
- Replaced class-based selectors with data attributes (e.g.
[data-attr="insight-empty-state"]) across test files for better maintainability - Added rotating loading messages with fade transitions in EmptyStates.tsx
- Simplified loading state UI by removing extra wrappers and reducing vertical space
- Implemented non-linear progress bar that caps at 99% using arctangent function
- Consolidated styles using Tailwind classes instead of separate CSS files
The changes improve visual consistency while maintaining core functionality and test coverage.
13 file(s) reviewed, 6 comment(s)
Edit PR Review Bot Settings | Greptile
frontend/src/scenes/insights/EmptyStates/EmptyStates.stories.tsx
Outdated
Show resolved
Hide resolved
rafaeelaudibert
commented
Feb 3, 2025
frontend/src/scenes/insights/EmptyStates/EmptyStates.stories.tsx
Outdated
Show resolved
Hide resolved
rafaeelaudibert
force-pushed
the
28172-improve-insight-loading-state
branch
from
43d1eb0 to
593b946
Compare
robbie-c
reviewed
Feb 5, 2025
rafaeelaudibert
force-pushed
the
28172-improve-insight-loading-state
branch
2 times, most recently
from
7f3cb5d to
fcfd04b
Compare
📸 UI snapshots have been updated18 snapshot changes in total. 0 added, 18 modified, 0 deleted:
Triggered by this commit. |
rafaeelaudibert
force-pushed
the
28172-improve-insight-loading-state
branch
from
9414066 to
22949c3
Compare
📸 UI snapshots have been updated32 snapshot changes in total. 0 added, 32 modified, 0 deleted:
Triggered by this commit. |
📸 UI snapshots have been updated1 snapshot changes in total. 0 added, 1 modified, 0 deleted:
Triggered by this commit. |
rafaeelaudibert
force-pushed
the
28172-improve-insight-loading-state
branch
from
fbf2245 to
e45008d
Compare
📸 UI snapshots have been updated32 snapshot changes in total. 0 added, 32 modified, 0 deleted:
Triggered by this commit. |
rafaeelaudibert
force-pushed
the
28172-improve-insight-loading-state
branch
from
0b5a030 to
1aa3e70
Compare
This isn't very modern and it occupies a lot of space. This was prompted by it not fitting the Web Vitals UI, let's tweak it all around the app and see if it looks nicer like this.
Or else the snapshot is never generated because the selector is never found
We only need the gray background while loading, let's remove it from the other ones
📸 UI snapshots have been updated3 snapshot changes in total. 0 added, 3 modified, 0 deleted:
Triggered by this commit. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Our loading state for insights isn't very modern and it occupies a lot of space. This was prompted by it not fitting the Web Vitals UI, let's tweak it all around the app and see if it looks nicer like this.
Gravacao.de.Tela.2025-02-05.153252.mp4
Does this work well for both Cloud and self-hosted?
Oh yeah
How did you test this code?
Visually locally + snapshots
Closes #28172