feat: add delay before prefetching

Author: Takshil-Kunadia

packages/block-library/src/image/index.php

@@ -211,8 +211,9 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$p->set_attribute( 'data-wp-on-async--load', 'callbacks.setButtonStyles' );
 	$p->set_attribute( 'data-wp-on-async-window--resize', 'callbacks.setButtonStyles' );
 	// Set an event to prefetch the image on pointerenter and pointerdown(mobile).
-	$p->set_attribute( 'data-wp-on--pointerenter', 'actions.prefetchImage' );
+	$p->set_attribute( 'data-wp-on--pointerenter', 'actions.prefetchImageWithDelay' );
 	$p->set_attribute( 'data-wp-on--pointerdown', 'actions.prefetchImage' );
+	$p->set_attribute( 'data-wp-on--pointerleave', 'actions.cancelPrefetch' );
 	// Sets an event callback on the `img` because the `figure` element can also
 	// contain a caption, and we don't want to trigger the lightbox when the
 	// caption is clicked.

packages/block-library/src/image/view.js

@@ -6,6 +6,7 @@ import {
 	getContext,
 	getElement,
 	withSyncEvent,
+	withScope,
 } from '@wordpress/interactivity';
 
 /**
@@ -50,6 +51,7 @@ const { state, actions, callbacks } = store(
 	{
 		state: {
 			currentImageId: null,
+			prefetchTimers: {},
 			get currentImage() {
 				return state.metadata[ state.currentImageId ];
 			},
@@ -212,20 +214,43 @@ const { state, actions, callbacks } = store(
 				}
 			},
 			prefetchImage() {
-				const ctx = getContext();
-				if ( ! isValidLink( ctx.uploadedSrc ) ) {
+				const { imageId } = getContext();
+				const uploadedSrc = state.metadata[ imageId ].uploadedSrc;
+
+				if ( ! isValidLink( uploadedSrc ) ) {
 					return;
 				}
 
-				// Creates a link element to prefetch the image.
 				const imageLink = document.createElement( 'link' );
 				imageLink.rel = 'prefetch';
 				imageLink.as = 'image';
-				imageLink.href = ctx.uploadedSrc;
+				imageLink.href = uploadedSrc;
 
-				// Appends the link element to the head of the document to start the prefetch.
+				// Appends the link element to start the prefetch.
 				document.head.appendChild( imageLink );
 			},
+			prefetchImageWithDelay() {
+				const { imageId } = getContext();
+
+				if ( state.prefetchTimers && state.prefetchTimers[ imageId ] ) {
+					clearTimeout( state.prefetchTimers[ imageId ] );
+				}
+
+				state.prefetchTimers[ imageId ] = setTimeout(
+					withScope( () => {
+						actions.prefetchImage();
+						delete state.prefetchTimers[ imageId ];
+					} ),
+					200
+				);
+			},
+			cancelPrefetch() {
+				const { imageId } = getContext();
+				if ( state.prefetchTimers && state.prefetchTimers[ imageId ] ) {
+					clearTimeout( state.prefetchTimers[ imageId ] );
+					delete state.prefetchTimers[ imageId ];
+				}
+			},
 		},
 		callbacks: {
 			setOverlayStyles() {