feat: Improve insights overall loading state #28229

rafaeelaudibert · 2025-02-03T18:52:36Z

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

rafaeelaudibert · 2025-02-03T18:53:03Z

Marked as WIP while I fix CI - it'll certainly break

github-actions · 2025-02-03T19:23:45Z

Size Change: 0 B

Total Size: 1.18 MB

ℹ️ View Unchanged

Filename	Size
`frontend/dist/toolbar.js`	1.18 MB

_{compressed-size-action}

posthog-bot · 2025-02-03T20:17:54Z

📸 UI snapshots have been updated

33 snapshot changes in total. 0 added, 33 modified, 0 deleted:

chromium: 0 added, 33 modified, 0 deleted (diff for shard 1, diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

...__/scenes-app-insights-error-empty-states--estimated-query-execution-time-too-long--dark.png

frontend/__snapshots__/scenes-app-insights-error-empty-states--long-loading--dark.png

posthog-bot · 2025-02-03T21:32:09Z

📸 UI snapshots have been updated

14 snapshot changes in total. 0 added, 14 modified, 0 deleted:

chromium: 0 added, 14 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

rafaeelaudibert · 2025-02-03T22:17:28Z

frontend/src/scenes/insights/EmptyStates/EmptyStates.scss

+/* 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%);
 }


@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?

The idea is that we don't let engineers write this kind of tailwind class; adding opacity on the fly promotes deviation from controlled colors and leads to potential contrast issues!

greptile-apps

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}

cypress/e2e/insights-saved.cy.ts

frontend/src/queries/nodes/WebVitals/WebVitalsContent.tsx

frontend/src/scenes/insights/EmptyStates/EmptyStates.stories.tsx

frontend/src/scenes/insights/EmptyStates/EmptyStates.scss

frontend/src/scenes/insights/EmptyStates/EmptyStates.tsx

frontend/src/scenes/insights/EmptyStates/EmptyStates.stories.tsx

robbie-c

I'll let the more design-oriented people give their feedback about that part. It looks like greptile has a few good comments here

posthog-bot · 2025-02-05T17:53:05Z

📸 UI snapshots have been updated

18 snapshot changes in total. 0 added, 18 modified, 0 deleted:

chromium: 0 added, 18 modified, 0 deleted (diff for shard 1, diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2025-02-05T18:47:39Z

📸 UI snapshots have been updated

32 snapshot changes in total. 0 added, 32 modified, 0 deleted:

chromium: 0 added, 32 modified, 0 deleted (diff for shard 1, diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2025-02-05T19:08:43Z

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

chromium: 0 added, 1 modified, 0 deleted (diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2025-02-07T14:50:23Z

📸 UI snapshots have been updated

32 snapshot changes in total. 0 added, 32 modified, 0 deleted:

chromium: 0 added, 32 modified, 0 deleted (diff for shard 1, diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2025-02-07T22:31:54Z

📸 UI snapshots have been updated

3 snapshot changes in total. 0 added, 3 modified, 0 deleted:

chromium: 0 added, 3 modified, 0 deleted (diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

frontend/__snapshots__/scenes-app-insights-loading-messages--loading-messages--dark.png

adamleithp · 2025-02-10T12:49:47Z

frontend/__snapshots__/scenes-app-insights-error-empty-states--long-loading--dark.png

ah here it is, looks great

adamleithp

I think it could probably sit on the default background like before (less box inside a box, and also that progress bar remainder is kinda lost...), that's my only suggestion!

adamleithp · 2025-02-10T12:53:41Z

frontend/__snapshots__/scenes-app-insights-error-empty-states--long-loading--light.png

I think it could probably sit on the default background like before (less box inside a box, and also that progress bar remainder is kinda lost...), that's my only suggestion!

The whole idea that @corywatilo suggested in #28172 is the box so that it looks more like a Skeleton with that gray background. The problem here might be that we're trying to add it to places it shouldn't be, thoughts? If the UI isn't ready for a Skeleton-ready container (too box-y, which I agree), then maybe we should just scratch this for now. Or maybe we should make that bg optional? Not sure

Ah yea Cory does specifically [in a] "frame", ok fair enough, let's see how it goes! LGTM, it's definitely better than it was.

adamleithp · 2025-02-10T13:00:19Z

frontend/src/scenes/insights/EmptyStates/EmptyStates.scss

+/* 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%);
 }


The idea is that we don't let engineers write this kind of tailwind class; adding opacity on the fly promotes deviation from controlled colors and leads to potential contrast issues!

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

posthog-bot · 2025-02-12T13:24:56Z

📸 UI snapshots have been updated

28 snapshot changes in total. 0 added, 28 modified, 0 deleted:

chromium: 0 added, 24 modified, 0 deleted (diff for shard 1, diff for shard 2)
webkit: 0 added, 4 modified, 0 deleted (diff for shard 2)

Triggered by this commit.

👉 Review this PR's diff of snapshots.

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

rafaeelaudibert requested review from corywatilo, adamleithp and a team February 3, 2025 18:52

rafaeelaudibert force-pushed the 28172-improve-insight-loading-state branch from 3822319 to 531668a Compare February 3, 2025 19:57

PostHog deleted a comment from posthog-bot Feb 3, 2025

rafaeelaudibert commented Feb 3, 2025

View reviewed changes

...__/scenes-app-insights-error-empty-states--estimated-query-execution-time-too-long--dark.png Outdated Show resolved Hide resolved

rafaeelaudibert commented Feb 3, 2025

View reviewed changes

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 February 3, 2025 21:12

rafaeelaudibert marked this pull request as ready for review February 3, 2025 22:15

rafaeelaudibert requested a review from robbie-c February 3, 2025 22:15

PostHog deleted a comment from posthog-bot Feb 3, 2025

rafaeelaudibert commented Feb 3, 2025

View reviewed changes

greptile-apps bot reviewed Feb 3, 2025

View reviewed changes

rafaeelaudibert commented Feb 3, 2025

View reviewed changes

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 February 4, 2025 16:40

robbie-c reviewed Feb 5, 2025

View reviewed changes

rafaeelaudibert mentioned this pull request Feb 5, 2025

Sprint - Feb 10 - Feb 21 #28311

Open

rafaeelaudibert force-pushed the 28172-improve-insight-loading-state branch 2 times, most recently from 7f3cb5d to fcfd04b Compare February 5, 2025 17:31

rafaeelaudibert force-pushed the 28172-improve-insight-loading-state branch from 9414066 to 22949c3 Compare February 5, 2025 18:25

rafaeelaudibert force-pushed the 28172-improve-insight-loading-state branch from fbf2245 to e45008d Compare February 7, 2025 14:29

rafaeelaudibert force-pushed the 28172-improve-insight-loading-state branch from 0b5a030 to 1aa3e70 Compare February 7, 2025 22:09

adamleithp reviewed Feb 10, 2025

View reviewed changes

frontend/__snapshots__/scenes-app-insights-loading-messages--loading-messages--dark.png Outdated Show resolved Hide resolved

adamleithp reviewed Feb 10, 2025

View reviewed changes

frontend/__snapshots__/scenes-app-insights-error-empty-states--long-loading--dark.png Outdated

Copy link

Contributor

adamleithp Feb 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah here it is, looks great

adamleithp requested changes Feb 10, 2025

View reviewed changes

adamleithp approved these changes Feb 10, 2025

View reviewed changes

rafaeelaudibert force-pushed the 28172-improve-insight-loading-state branch from 336aef1 to bc7309f Compare February 11, 2025 12:56

rafaeelaudibert and others added 10 commits February 12, 2025 10:03

feat: Improve insights overall loading state

2bc2757

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.

fix: Revert some UI changes, these looked ugly

2a8824a

tests: Disable waiting for selector

21a3667

Or else the snapshot is never generated because the selector is never found

fix: Finally fix LoadingMessages snapshot not working

1a3e07d

style: Remove gray background from unnecessary components

40b892d

We only need the gray background while loading, let's remove it from the other ones

fix: Remove scrolling bar

d7da4a1

style: Remove redundant copy

ff5afc1

ci: Attempt to fix prettier

760702e

Update UI snapshots for chromium (1)

1044cf5

Update UI snapshots for chromium (2)

abd6c9a

rafaeelaudibert force-pushed the 28172-improve-insight-loading-state branch from bc7309f to abd6c9a Compare February 12, 2025 13:04

rafaeelaudibert enabled auto-merge (squash) February 12, 2025 13:05

github-actions bot added 3 commits February 12, 2025 13:14

Update UI snapshots for webkit (2)

ba4cdf5

Update UI snapshots for chromium (1)

9593a0c

Update UI snapshots for chromium (2)

05431a3

rafaeelaudibert merged commit d2809d0 into master Feb 12, 2025
103 checks passed

rafaeelaudibert deleted the 28172-improve-insight-loading-state branch February 12, 2025 13:52

zlwaterfield pushed a commit that referenced this pull request Feb 13, 2025

feat: Improve insights overall loading state (#28229)

a9fdb58

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Improve insights overall loading state #28229

feat: Improve insights overall loading state #28229

rafaeelaudibert commented Feb 3, 2025 •

edited

Loading

rafaeelaudibert commented Feb 3, 2025

github-actions bot commented Feb 3, 2025 •

edited

Loading

posthog-bot commented Feb 3, 2025

posthog-bot commented Feb 3, 2025

rafaeelaudibert Feb 3, 2025

adamleithp Feb 10, 2025

greptile-apps bot left a comment

robbie-c left a comment

posthog-bot commented Feb 5, 2025

posthog-bot commented Feb 5, 2025

posthog-bot commented Feb 5, 2025

posthog-bot commented Feb 7, 2025

posthog-bot commented Feb 7, 2025

adamleithp Feb 10, 2025

adamleithp left a comment

adamleithp Feb 10, 2025

rafaeelaudibert Feb 10, 2025

adamleithp Feb 10, 2025

adamleithp Feb 10, 2025

posthog-bot commented Feb 12, 2025

feat: Improve insights overall loading state #28229

feat: Improve insights overall loading state #28229

Conversation

rafaeelaudibert commented Feb 3, 2025 • edited Loading

Does this work well for both Cloud and self-hosted?

How did you test this code?

rafaeelaudibert commented Feb 3, 2025

github-actions bot commented Feb 3, 2025 • edited Loading

posthog-bot commented Feb 3, 2025

📸 UI snapshots have been updated

posthog-bot commented Feb 3, 2025

📸 UI snapshots have been updated

rafaeelaudibert Feb 3, 2025

Choose a reason for hiding this comment

adamleithp Feb 10, 2025

Choose a reason for hiding this comment

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

robbie-c left a comment

Choose a reason for hiding this comment

posthog-bot commented Feb 5, 2025

📸 UI snapshots have been updated

posthog-bot commented Feb 5, 2025

📸 UI snapshots have been updated

posthog-bot commented Feb 5, 2025

📸 UI snapshots have been updated

posthog-bot commented Feb 7, 2025

📸 UI snapshots have been updated

posthog-bot commented Feb 7, 2025

📸 UI snapshots have been updated

adamleithp Feb 10, 2025

Choose a reason for hiding this comment

adamleithp left a comment

Choose a reason for hiding this comment

adamleithp Feb 10, 2025

Choose a reason for hiding this comment

rafaeelaudibert Feb 10, 2025

Choose a reason for hiding this comment

adamleithp Feb 10, 2025

Choose a reason for hiding this comment

adamleithp Feb 10, 2025

Choose a reason for hiding this comment

posthog-bot commented Feb 12, 2025

📸 UI snapshots have been updated

rafaeelaudibert commented Feb 3, 2025 •

edited

Loading

github-actions bot commented Feb 3, 2025 •

edited

Loading