AnalyticalTable: Misaligned loading indicator in Firefox

[miDeb]

Describe the bug

The loading indicator is showing in the top left instead of the center, the gray overlay is not shown while loading.

Isolated Example

https://sap.github.io/ui5-webcomponents-react/nightly/?path=/docs/data-display-analyticaltable--docs#infinite-scrolling

Reproduction steps

Scroll down in the infinite scrolling example of the official example.

Expected Behaviour

The loading indicator appears centered, a gray overlay is visible.

Screenshots or Videos

UI5 Web Components for React Version

2 (checked latest nightly version)

UI5 Web Components Version

2

Browser

Firefox

Operating System

No response

Additional Context

Contacted Mozilla about this issue, according to them Firefox's layout is correct. You can read through the bug report here.

For some reason, Chrome is not honoring that display:inline styling here

The correct fix here is for the site to remove that display:initial. I confirmed that this fixes the bug in Firefox if I untick that style in DevTools (after searching the page's DOM for .ui5-busy-indicator-root and inspecting its styles).

Relevant log output

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[dholbert]

Hi! I'm the person who investigated this on Mozilla's side. The bug can be reproduced in Chrome and Safari as well, but it requires some manual tweaks in DevTools (adding and removing some styles) -- i.e. somehow they land on a rendering that happens-to-appear-"good", but it's unstable in the face of dynamic adjustments. See more details on the Mozilla bug report, including a screencast of me triggering the unwanted rendering in Chrome at https://bugzilla.mozilla.org/attachment.cgi?id=9420208

[dholbert]

In any case, as noted in the mozilla bug report, the problematic CSS here is this:

ui5-webcomponents-react/packages/main/src/components/AnalyticalTable/index.tsx

Lines 102 to 104 in 7626d0d

	:host([data-component-name="AnalyticalTableBusyIndicator"]) .ui5-busy-indicator-root {
	display: initial;
	}

The display: initial there (applied to the outermost element in this subtree) really means display:inline. That forces this outermost element to be an inline box (like an unstyled span); and that means it ends up zero-width in this case, rather than filling its container. This means the absolutely-positioned indicator-dot-descendants end up being positioned inside of a zero-width containing block on the left edge.

If you remove that display:initial style, the broken rendering goes away, and the dots appear nicely centered in the container, where they're meant to be. (I've confirmed this in Firefox, as well as in Chrome and Safari when I've nudged them to reproduce the bug as described in the Mozilla bug report).

[Lukas742]

Hi @miDeb & @dholbert

thanks a lot for making the effort to research this!

If you remove that display:initial style, the broken rendering goes away, and the dots appear nicely centered in the container, where they're meant to be. (I've confirmed this in Firefox, as well as in Chrome and Safari when I've nudged them to reproduce the bug as described in the Mozilla bug report).

Unfortunately, this leads to other issues, such as when the page or container is resized. Luckily, positioning the BusyIndicator (block layer & loading indicator) outside of the normal flow, relative to the table container, avoids these problems. (see linked PR)

[ui5-webcomponents-react-bot]

🎉 This issue has been resolved in version v2.0.0 🎉

The release is available on v2.0.0

Your semantic-release bot 📦🚀