Reposition Loading Indicator

[cvetankanechevska]

Signed-off-by: Cvetanka [email protected]

Description

Fix #779

Development notes

Style fix for positioning LoadingIcon to the center of Flowchart and make it responsive as Sidebar can be open/close.

QA notes

I hardcoded the value so it can be visible for testing. After this PR is approved, I will return it as it was.

Checklist

• Read the contributing guidelines
• Opened this PR as a 'Draft Pull Request' if it is work-in-progress
• Updated the documentation to reflect the code changes
• Added new entries to the RELEASE.md file
• Added tests to cover my changes

[comym]

Hey hey, thanks for that!

It's pretty much there but the loader is not really central to the flowchart canvas. It should be a bit to the left.

The area we should consider is the one marked as this lime colour as seen in the images. Basically the area we should consider as width reference is everything from the end of the utility bar all the way to the right edge of the screen.

Many thanks, let me know if you have any questions.

[tynandebold]

Thanks for this!

It still looks a little off center to me. I think that's because the container element is overlapping part of the slidebar and toolbar:

As Gabriel said, it should only cover the flowchart and nothing more. Then it should align perfectly.

[cvetankanechevska]

Thanks for this!

It still looks a little off center to me. I think that's because the container element is overlapping part of the slidebar and toolbar:

As Gabriel said, it should only cover the flowchart and nothing more. Then it should align perfectly.

Yes, I see. I am using calc() for calculating the width of flowchart and sidebar. But I am missing something, so I will recheck it again.

[tynandebold]

Looks perfect now, thank you.

[tynandebold]

Nit: I think we can get away without total- here.

Suggested change

	$total-sidebar-toolbar-width-closed: $sidebar-width-closed +
	$global-toolbar-width;
	$total-sidebar-toolbar-width-open: $sidebar-width-open + $global-toolbar-width;
	$sidebar-toolbar-width-closed: $sidebar-width-closed +
	$global-toolbar-width;
	$sidebar-toolbar-width-open: $sidebar-width-open + $global-toolbar-width;

[rashidakanchwala]

hi @cvetankanechevska -- for me, even after the flowchart is loaded, the logo still shows in the center and doesn't disappear. I can show it to u on call, if u have some time today.

[rashidakanchwala]

LGTM!

[Huongg]

hey @cvetankanechevska I'm just thinking about whether it needs to transition width here? It's normally quite bad for the page performance as the property triggers layout or paint 🤔

I'm not sure whether it's possible to just set a fix width and use translate to move it around?

[cvetankanechevska]

Hey @Huongg, yes we need it to be a smooth reposition when opening/closing the Sidebar