🐛 Explore: Slow rendering of group diagram in the latest version

[patrickwyler]

Workspace

explore

📜 Description

The rendering of groups is significantly slower in this version compared to earlier ones. We have ~250 groups which makes the slowdown more noticeable than for others.

Version: @backstage-community/plugin-explore@npm:0.13.0

Last fast rendering version: @backstage-community/plugin-explore@npm:0.12.0

👍 Expected behavior

The page should render like before.

👎 Actual Behavior with Screenshots

It looks like the diagram is rerendered a lot during the loading process.

👟 Reproduction steps

Add some groups and then navigate to the "Groups" tab of the explore plugin.

1. Checkout: https://github.com/patrickwyler/community-plugins/tree/5646-explore-slow-group-diagram-rendering
2. cd workspaces/explore && yarn run start
3. Navigate to Groups tab

📃 Provide the context for the Bug.

No response

👀 Have you spent some time to check if this bug has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

Are you willing to submit PR?

Yes

[patrickwyler]

Could be that it's a side effect from the transition from MUI to BUI.

[awanlin]

Hi @patrickwyler, there was change upstream in the main Backstage repo that might be the root cause here. Beyond version bumps there hasn't been a lot of changes to the Explore plugin itself in some time.

[patrickwyler]

@awanlin I created a PR with the fix. I believe the max height of a component that wrapped this one got removed.