Adding a Delay for Board Thumbnail Snapshots

In some cases, a board may need to fetch data/assets over the network or perform other asynchronous operations before it's ready to have a snapshot taken to be used as a thumbnail on a project's home screen.

To handle this, there's an option called readyToSnapshot that allows a board to signal when it's prepared for snapshotting. Here's an example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
export default createBoard({
    name: 'Page That Fetches Data',
    Board: () => (
        <PageWrapperRealData path="/products">
            <ContentSlot>
                <ProductsPage />
            </ContentSlot>
        </PageWrapperRealData>
    ),
    isSnippet: false,
    environmentProps: {
        canvasMargin: { right: 0, bottom: 0, left: 0 },
    },
    readyToSnapshot: waitForProductImage,
});  
export async function waitForProductImage() {
    return new Promise<void>((resolve) => {
        const interval = setInterval(() => {
            if (checkImageReady('img[data-testid="product-img"]')) {
                clearInterval(interval);
                clearTimeout(timeout);
                console.log('FOUND');
                resolve();
            }
        });  
        const timeout = setTimeout(() => {
            clearInterval(interval);
            console.log('TIMEOUT');
            resolve();
        }, 10000);
    });}

This option should be specified for boards with async operations that influence the board's appearance, and the function should return a Promise that resolves when the thumbnail is ready. Here's another simple example:

1
readyToSnapshot: () => new Promise((resolve) => setTimeout(resolve, 8000))

However, to prevent the system from waiting too long (or even indefinitely) for a thumbnail to be ready, you can set a maximum delay for snapshotting thumbnails using the maxThumbnailSnapshotDelay configuration key in codux.config.json.

maxThumbnailSnapshotDelay

This configuration sets the maximum delay for snapshotting a thumbnail to 5000 milliseconds (or 5 seconds). The default value is 5000.

1
2
3
4
5
{  
    "$schema": "http://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
    ...
    "maxThumbnailSnapshotDelay": 5000
}

By using readyToSnapshot and maxThumbnailSnapshotDelay together, you can effectively manage the timing of thumbnail snapshotting, ensuring that all necessary operations are completed and the thumbnail appears as expected.

Was this article helpful?

Yes

Codux Help Center

Browse our articles to find the answers you need

Adding a Delay for Board Thumbnail Snapshots

maxThumbnailSnapshotDelay