Added feature flag for thumbnail caching, default off (#8974)

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',
+			],
 		];
 	}
 

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 (
     <UnitsProvider pageSize={{ width, height }}>