diff --git a/includes/Experiments.php b/includes/Experiments.php index 96913d835083..9e24caea7de0 100644 --- a/includes/Experiments.php +++ b/includes/Experiments.php @@ -390,6 +390,18 @@ public function get_experiments(): array { 'description' => __( 'Enable video trimming', 'web-stories' ), 'group' => 'editor', ], + + /** + * Author: @barklund + * Issue: #8973 + * Creation date: 2021-09-07 + */ + [ + 'name' => 'enableThumbnailCaching', + 'label' => __( 'Thumbnail Caching', 'web-stories' ), + 'description' => __( 'Enable thumbnail caching', 'web-stories' ), + 'group' => 'editor', + ], ]; } diff --git a/packages/story-editor/src/components/carousel/pagepreview/index.js b/packages/story-editor/src/components/carousel/pagepreview/index.js index 5ebbea78b451..5cf593a8216a 100644 --- a/packages/story-editor/src/components/carousel/pagepreview/index.js +++ b/packages/story-editor/src/components/carousel/pagepreview/index.js @@ -28,6 +28,7 @@ import { useCallback, useEffect, } from '@web-stories-wp/react'; +import { useFeature } from 'flagged'; /** * Internal dependencies @@ -102,6 +103,7 @@ function PagePreview({ page, label, ...props }) { const setPageRef = useCallback((node) => node && setPageNode(node), []); const hasImage = !isActive && imageBlob; const pageAtGenerationTime = useRef(); + const enableThumbnailCaching = useFeature('enableThumbnailCaching'); // Whenever the page is re-generated and this is not the active page // remove the old (and now stale) image blob @@ -113,9 +115,9 @@ function PagePreview({ page, label, ...props }) { }, [page, isActive]); useEffect(() => { - // If this is not the active page, there is a page node and we - // don't already have a snapshot - if (!isActive && pageNode && !imageBlob) { + // If this is not the active page, there is a page node, we + // don't already have a snapshot and thumbnail caching is active + if (enableThumbnailCaching && !isActive && pageNode && !imageBlob) { // Schedule an idle callback to actually generate the image const id = requestIdleCallback( () => { @@ -134,7 +136,7 @@ function PagePreview({ page, label, ...props }) { } // Required because of eslint: consistent-return return undefined; - }, [isActive, pageNode, imageBlob, page]); + }, [enableThumbnailCaching, isActive, pageNode, imageBlob, page]); return (