Bug: Sidebar activation body is sometimes missing

[mnholtz]

Describe the bug

The body of the sidebar mod activation panel is sometimes missing, despite the elements being present in the DOM:

To Reproduce

Unfortunately, there is not a reliable way to reproduce. But it happens after:

1. Visiting the Marketplace www.pixiebrix.com/marketplace
2. Going to a Marketplace listing detail
3. Clicking "Activate" for that mod with the PixieBrix Extension installed

Actual behavior

Sidebar shows only the CTA buttons, and no sidebar activation panel body, despite the body being present in the DOM.

Expected behavior

Sidebar panel is fully-populated with sidebar activation copy/mod configuration options.

Additional context

• See additional context here: https://pixiebrix.slack.com/archives/C0436P48QHY/p1722609218628109
• It's possible that the .scrollable-area class applied to the body is not working as expected in some situations

  pixiebrix-extension/src/utils/layout.scss

  Lines 87 to 90 in 5bb2c66

  	.scrollable-area {
  	height: 0;
  	overflow-y: auto;
  	}

[twschiller]

The mod in question is a 1-click wonder (doesn't have any activation options), so it shouldn't be showing the activation form (Cancel/OK) https://www.pixiebrix.com/marketplace/31013451-a9ed-4d1f-9cc0-f869ceb767be/

What might be happening is there's an error fetching some data (the marketplace listing?) causing some of the
content not to be rendered which is then also interacting with the scrollable-area class

Code Reference:

pixiebrix-extension/src/sidebar/activateMod/ActivateModPanel.tsx

Line 390 in 29a8415

const ActivateModPanel: React.FC<{ mod: ModActivationConfig }> = ({ mod }) => {

[grahamlangford]

It's not an error, and this component isn't a 1-click wonder. The css file is being disabled by IsolatedComponent:

When the bug is replicated:

When the sidebar renders as expected:

Note the difference for /css/ActivatePanels.css

Looks to be a race condition that is only reproducible if there is another panel open

See

pixiebrix-extension/src/components/IsolatedComponent.tsx

Lines 39 to 70 in b270af7

	async function discardStylesheetsWhilePending(
	lazyFactory: LazyFactory<unknown>,
	) {
	const baseUrl = chrome.runtime.getURL("");
	const observer = new MutationObserver((mutations) => {
	for (const mutation of mutations) {
	for (const node of mutation.addedNodes) {
	if (node instanceof HTMLLinkElement && node.href.startsWith(baseUrl)) {
	// Disable stylesheet without removing it. Webpack still awaits its loading.
	node.media = "not all";
	node.dataset.pixiebrix = "Disabled by IsolatedComponent";
	}
	}
	}
	});
	observer.observe(document.head, {
	childList: true,
	});
	// Call and discard. React.lazy() will call it again and use the result or the error.
	// This is fine because import() does not re-fetch/re-run the module.
	try {
	// The function must be first called *after* the observer is set up.
	await lazyFactory();
	} catch {
	// React.lazy() will take care of it
	} finally {
	observer.disconnect();
	}
	}