Skip to content

Commit

Permalink
Merge pull request #580 from chromaui/docs_positioning_and_resources_…
Browse files Browse the repository at this point in the history
…changes

Docs: Resource loading and position sticky minor adjustments
  • Loading branch information
jonniebigodes authored Oct 11, 2024
2 parents a12a69e + 74c4a99 commit 10c5c6f
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 9 deletions.
2 changes: 1 addition & 1 deletion src/content/snapshotOptions/position-sticky.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ sidebar: { order: 7 }

Chromatic captures `position:sticky` and `position:fixed` elements in their initial positions once per snapshot.

We do this because sticky and fixed elements can persist in the viewport even when content extends beyond the viewport. Since these elements can change with scroll, we use the initial position of the element when the browser loads to anchor where it appears in your snapshot.
We do this because sticky and fixed elements can persist in the viewport even when content extends beyond it. Since these elements can change with scroll, we use the element's initial position when the browser loads to anchor it where it appears in your snapshot.

For example, if your UI has a bottom positioned element the sticky element will appear in the bottom position when the browser loads, the remaining content will flow under it.

Expand Down
16 changes: 8 additions & 8 deletions src/content/snapshotOptions/resource-loading.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
---
layout: "../../layouts/Layout.astro"
title: Resource loading
description: Learn how to Chromatic loads resources and waits to screenshot.
description: Learn how Chromatic loads resources and waits to screenshot.
sidebar: { order: 3 }
---

# Resource loading

Chromatic waits for resources like images and fonts to load before capturing a snapshot. When resources fail to load it leads to unintended UI changes.
Chromatic waits for resources like images and fonts to load before capturing a snapshot. When resources fail to load, this can lead to unintended UI changes.

The maximum time to capture a snapshot is 15 seconds. If the resources fail to load in the allotted time, Chromatic will retry. After several retries, the snapshot will be captured anyway and a warning message will be displayed.
The maximum time to capture a snapshot is 15 seconds. If the resources fail to load in time, Chromatic will retry. After several retries, the snapshot will be captured, and a warning message will be displayed.

## Avoid external resources

It's tough to predict network stability third-party hosting reliability. These factors mean external resources might not load predictably and affect your snapshots.
It's tough to predict network stability and third-party hosting reliability. These factors mean external resources might not load predictably and affect your snapshots.

We recommend adding [resources to your Storybook](https://storybook.js.org/configurations/serving-static-files/) or using a reliable [placeholder service](https://placehold.co/). This also makes your builds run faster.
If you're running tests with Storybook, we recommend adding [resources to your Storybook](https://storybook.js.org/docs/configure/integration/images-and-assets#serving-static-files-via-storybook-configuration) or using a reliable [placeholder service](https://placehold.co/). With Playwright or Cypress, resources should be provided by the local application server. However, if you need to load resources from external domains, you can enable the `assetDomains` option in the project configuration. Including these options will make your builds run faster.

## Asynchronous rendering

Our browsers monitor network activity that occurs while your story renders. If your story renders after a delay (i.e. asynchronously), there is no way for us to tell what happened. Thus, we can't reliably wait for subsequent resources to be loaded asynchronously.
Our browsers monitor network activity while your tests are rendered. If your test renders after a delay (i.e., asynchronously), we cannot tell what happened. Thus, we can't reliably wait for subsequent resources to be loaded asynchronously.

If you know how long async rendering takes, you can add a [delay](/docs/delay) to avoid snapshotting until after that happens. But it can be difficult to reliably set a time that network resources will load within so you may have to add/subtract seconds to the delay.
If you know how long async rendering takes, you can add a [delay](/docs/delay) to avoid snapshotting until after that happens. However, it can be difficult to reliably set a time that network resources will load within, so you may have to add/subtract seconds to the delay.

We are investigating ways to add first-class support to Storybook and Chromatic for asynchronous rendering. Let us know if you need this feature by chat or [email](mailto:[email protected]?Subject=Asynchronous%20Rendering).
We are investigating ways to add first-class support for asynchronous rendering to Storybook and Chromatic. Let us know if you need this feature by chat or [email](mailto:[email protected]?Subject=Asynchronous%20Rendering).

0 comments on commit 10c5c6f

Please sign in to comment.