Skip to content

Commit

Permalink
perf: don't load advanced info details (library components) before th…
Browse files Browse the repository at this point in the history 
…ey're needed (#1409)
  • Loading branch information
@bradenmacdonald
bradenmacdonald authored Oct 21, 2024
1 parent 6ae68bd commit 841aede
Showing 1 changed file with 69 additions and 62 deletions.
131 changes: 69 additions & 62 deletions src/library-authoring/component-info/ComponentAdvancedInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
} from '../data/apiHooks';
import messages from './messages';

export const ComponentAdvancedInfo: React.FC<Record<never, never>> = () => {
const ComponentAdvancedInfoInner: React.FC<Record<never, never>> = () => {
const intl = useIntl();
const { readOnly, sidebarComponentUsageKey: usageKey } = useLibraryContext();

Expand Down Expand Up @@ -48,72 +48,79 @@ export const ComponentAdvancedInfo: React.FC<Record<never, never>> = () => {
});
}, [editorRef, olxUpdater, intl]);

return (
<>
<h3 className="h5"><FormattedMessage {...messages.advancedDetailsUsageKey} /></h3>
<p className="text-monospace small">{usageKey}</p>
<h3 className="h5"><FormattedMessage {...messages.advancedDetailsOLX} /></h3>
{(() => {
if (isOLXLoading) { return <LoadingSpinner />; }
if (!olx) { return <FormattedMessage {...messages.advancedDetailsOLXError} />; }
return (
<div className="mb-4">
{olxUpdater.error && (
<Alert variant="danger">
<p><strong><FormattedMessage {...messages.advancedDetailsOLXEditFailed} /></strong></p>
{/*
TODO: fix the API so it returns 400 errors in a JSON object, not HTML 500 errors. Then display
a useful error message here like "parsing the XML failed on line 3".
(olxUpdater.error as Record<string, any>)?.customAttributes?.httpErrorResponseData.errorMessage
*/}
</Alert>
)}
<CodeEditor key={usageKey} readOnly={!isEditingOLX} editorRef={editorRef}>{olx}</CodeEditor>
{
isEditingOLX ? (
<>
<Button variant="primary" onClick={updateOlx} disabled={olxUpdater.isLoading}>
<FormattedMessage {...messages.advancedDetailsOLXSaveButton} />
</Button>
<Button variant="link" onClick={() => setEditingOLX(false)} disabled={olxUpdater.isLoading}>
<FormattedMessage {...messages.advancedDetailsOLXCancelButton} />
</Button>
</>
) : !readOnly ? (
<OverlayTrigger
placement="bottom-start"
overlay={(
<Tooltip id="olx-edit-button">
<FormattedMessage {...messages.advancedDetailsOLXEditWarning} />
</Tooltip>
)}
>
<Button variant="link" onClick={() => setEditingOLX(true)}>
<FormattedMessage {...messages.advancedDetailsOLXEditButton} />
</Button>
</OverlayTrigger>
) : (
null
)
}
</div>
);
})()}
<h3 className="h5"><FormattedMessage {...messages.advancedDetailsAssets} /></h3>
<ul>
{ areAssetsLoading ? <li><LoadingSpinner /></li> : null }
{ assets?.map(a => (
<li key={a.path}>
<a href={a.url}>{a.path}</a>{' '}
(<FormattedNumber value={a.size} notation="compact" unit="byte" unitDisplay="narrow" />)
</li>
)) }
</ul>
</>
);
};

export const ComponentAdvancedInfo: React.FC<Record<never, never>> = () => {
const intl = useIntl();
return (
<Collapsible
styling="basic"
title={intl.formatMessage(messages.advancedDetailsTitle)}
>
<dl>
<h3 className="h5"><FormattedMessage {...messages.advancedDetailsUsageKey} /></h3>
<p className="text-monospace small">{usageKey}</p>
<h3 className="h5"><FormattedMessage {...messages.advancedDetailsOLX} /></h3>
{(() => {
if (isOLXLoading) { return <LoadingSpinner />; }
if (!olx) { return <FormattedMessage {...messages.advancedDetailsOLXError} />; }
return (
<div className="mb-4">
{olxUpdater.error && (
<Alert variant="danger">
<p><strong><FormattedMessage {...messages.advancedDetailsOLXEditFailed} /></strong></p>
{/*
TODO: fix the API so it returns 400 errors in a JSON object, not HTML 500 errors. Then display
a useful error message here like "parsing the XML failed on line 3".
(olxUpdater.error as Record<string, any>)?.customAttributes?.httpErrorResponseData.errorMessage
*/}
</Alert>
)}
<CodeEditor key={usageKey} readOnly={!isEditingOLX} editorRef={editorRef}>{olx}</CodeEditor>
{
isEditingOLX ? (
<>
<Button variant="primary" onClick={updateOlx} disabled={olxUpdater.isLoading}>
<FormattedMessage {...messages.advancedDetailsOLXSaveButton} />
</Button>
<Button variant="link" onClick={() => setEditingOLX(false)} disabled={olxUpdater.isLoading}>
<FormattedMessage {...messages.advancedDetailsOLXCancelButton} />
</Button>
</>
) : !readOnly ? (
<OverlayTrigger
placement="bottom-start"
overlay={(
<Tooltip id="olx-edit-button">
<FormattedMessage {...messages.advancedDetailsOLXEditWarning} />
</Tooltip>
)}
>
<Button variant="link" onClick={() => setEditingOLX(true)}>
<FormattedMessage {...messages.advancedDetailsOLXEditButton} />
</Button>
</OverlayTrigger>
) : (
null
)
}
</div>
);
})()}
<h3 className="h5"><FormattedMessage {...messages.advancedDetailsAssets} /></h3>
<ul>
{ areAssetsLoading ? <li><LoadingSpinner /></li> : null }
{ assets?.map(a => (
<li key={a.path}>
<a href={a.url}>{a.path}</a>{' '}
(<FormattedNumber value={a.size} notation="compact" unit="byte" unitDisplay="narrow" />)
</li>
)) }
</ul>
</dl>
<ComponentAdvancedInfoInner />
</Collapsible>
);
};

0 comments on commit 841aede

Please sign in to comment.