Prevent jumps in All Traffic widget for loading states and when switching tabs

[felixarntz]

When the new All Traffic widget is in any loading state, you'll see brief jumps where the widget briefly is taller than usually. Similar inconsistencies can be noticed when switching tabs when new data needs to be loaded.

It seems that this is partly caused by the charts library, where on the initial render of any chart it uses a taller height for a split-second sometimes. If the problem here is the charts library and we cannot change that behavior, we should try to wrap it with some container that accounts for that jump, to ensure that at least not the overall widget height jumps.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The new All Traffic widget should always show up with a consistent height. Entering or leaving a loading state in any part should not trigger the height of the overall widget to change (causing content jumps).

Implementation Brief

• Adjust styles of the preview element in the user dimensions pie chart component to make sure it takes the same height as the loaded component.

Test Coverage

• N/A

Visual Regression Changes

• The All Traffic widget should have the same height no matter in which state it is (loading or rendering data).

QA Brief

• Set up the plugin on your local;
• Activate and connect the Analytics module;
• Go to the dashboard page;
• Check the All Traffic widget, it should remain in the same size when you switch tabs or select pie slices.

Changelog entry

• Avoid content shifts in All Traffic widget due to incorrect loading UI layout.

[felixarntz]

@eugene-manuilov I've by now already updated the PreviewBlocks to match their heights in 32e2be5. The only weird jump that remains on my end is that the PreviewBlock instance for the pie chart specifically jumps at some point during the loading phase, just maybe about a second before it is loaded. See here:

All-Traffic-bug.mov

So the problem here is not even between loading and non-loading state, but within loading state a jump happens. Let me know if you can replicate that, or if you see anything else that doesn't look smooth on your end.

Maybe the loading circle jump is the only thing we'll need to fix here.

[eugene-manuilov]

@felixarntz yeah, seems like the last bit is to adjust the size of the preview block for the user dimensions pie chart. IB is updated.

[felixarntz]

IB ✅

[wpdarren]

QA Update: Pass ✅

• Checked the All Traffic widget, it remained in the same size when switching tabs or selecting pie slices.

all-traffic.mov