Loading
Lazily load Lookbook embeds
What does this MR do?
Lazily load Lookbook embeds
Before, the Lookbook embed script was loaded on every page, even though most pages don't have Lookbook embeds. Now, the script is loaded on demand at most once during a session. If for some reason the script fails to load, an error is displayed with a link to the external Lookbook page.
The larger benefit of this is that the whole site doesn't break if the Lookbook app is unavailable.
Addresses #3626 (closed)
Screenshots or screen recordings
To recreate the broken state, you can block the Lookbook script URL.
| State | Before | After |
|---|---|---|
| Loaded NO CHANGE |
 |
 |
| Broken | N/A, page won't load |  |
Integrations
Not applicable — this change is internal to design.gitlab.com and does not affect @gitlab/ui package consumers.
- GitLab: N/A
- CustomersDot: N/A
- Duo UI: N/A
- Status Page: N/A
- Docs: N/A
- Switchboard: N/A
Does this MR meet the acceptance criteria?
Toggle the acceptance checklist
Conformity
- The "What does this MR do?" section in the MR description is filled out, explaining the reasons for and scope of the proposed changes, per "Say why not just what".
- Relevant label(s) are applied to the MR.
- The MR is added to a milestone.
- Added the
~"component:*"label(s) if applicable. - A changeset is added when this MR will do a patch, minor, or major update. More information can be found in
doc/changesets.md.
Components
- GitLab UI's contributing guidelines.
- If the MR changes a component's API, integration MR(s) have been opened (see integrations above).
Documentation
- If creating a new component page from scratch, it follows the page template structure.
- Content follows the GitLab Documentation Style Guide when appropriate.
- Related pages are cross-linked, where helpful. Component pages have related components and patterns defined in their Markdown front matter.
- If embedding a Figma file, it follows the Figma embed guide.
- Review requested from any GitLab designer or directly from a maintainer or trainee maintainer.
- Maintainer review follows the Pajamas UX maintainer review checklist.
Security
- Label as security and @ mention
@gitlab-com/gl-security/appsec - Security reports checked/validated by a reviewer from the AppSec team
Accessibility
- All actions and functionality can be done with a keyboard.
- Links, buttons, and controls have a visible focus state.
- All content is presented in text or with a text equivalent.
- Changes in a component's state are announced by a screen reader.
- Color combinations have sufficient contrast.
Edited by Mark Florian