feat(new-ui): add image prefetch in new ui (#628)

* feat(new-ui): add image prefetch in new ui

* fix(preload): fixed preloading function implementation

* feat(new-ui): add ref image prefetch in new ui

* feat(components): add data-qa tags for test purproses

* test(components): VisualChecsPage basic preload test

* refactor(style): rename variable

* feat(preload): replace image preloading function in old ui

* refactor(tests): remove unused variable

* refactor(prefetch): global link cache added

* refactor(preload): components use global cache

* fix(tests): fix stubs

---------

Co-authored-by: = <=>

Author: mordvinx

lib/static/components/modals/screenshot-accepter/index.jsx

@@ -10,10 +10,10 @@ import ScreenshotAccepterMeta from './meta';
 import ScreenshotAccepterBody from './body';
 import {getAcceptableImagesByStateName} from '../../../modules/selectors/tree';
 import {staticImageAccepterPropType} from '../../../modules/static-image-accepter';
-import {preloadImage} from '../../../modules/utils';
 
 import './style.css';
 import {AnalyticsContext} from '@/static/new-ui/providers/analytics';
+import {preloadImage} from '../../../modules/utils/imageEntity';
 
 const PRELOAD_IMAGE_COUNT = 3;
 
@@ -52,7 +52,8 @@ class ScreenshotAccepter extends Component {
             stateNameImageIds,
             activeImageIndex,
             retryIndex,
-            showMeta: false
+            showMeta: false,
+            disposables: {}
         };
         this.topRef = React.createRef();
 
@@ -65,6 +66,11 @@ class ScreenshotAccepter extends Component {
         this.analytics = this.context;
     }
 
+    componentWillUnmount() {
+        Object.values(this.state.disposables)
+            .forEach(disposeCallback => disposeCallback());
+    }
+
     componentDidUpdate() {
         this.topRef.current.parentNode.scrollTo(0, 0);
     }
@@ -223,7 +229,20 @@ class ScreenshotAccepter extends Component {
             const stateNameImageId = stateNameImageIds[preloadingImagesIndex];
             const {expectedImg, actualImg, diffImg} = last(this.props.imagesByStateName[stateNameImageId]);
 
-            [expectedImg, actualImg, diffImg].filter(Boolean).forEach(({path}) => preloadImage(path));
+            const disposables = {};
+
+            [expectedImg, actualImg, diffImg].filter(Boolean).forEach(({path}) => {
+                const disposeCallback = preloadImage(path);
+
+                disposables[path] = disposeCallback;
+            });
+
+            this.setState({
+                disposables: {
+                    ...this.state.disposables,
+                    ...disposables
+                }
+            });
         });
     }
 

lib/static/modules/utils/imageEntity.ts

@@ -0,0 +1,76 @@
+import {ImageEntity, ImageEntityCommitted, ImageEntityError, ImageEntityFail, ImageEntityStaged, ImageEntitySuccess, ImageEntityUpdated} from '../../new-ui/types/store';
+
+class LinkCache {
+    private static cache: Record<string, HTMLLinkElement | undefined> = {};
+
+    private static createPreloadLink(url: string): HTMLLinkElement {
+        const link = document.createElement('link');
+
+        link.rel = 'preload';
+        link.as = 'image';
+        link.href = url;
+
+        document.head.appendChild(link);
+
+        return link;
+    }
+
+    static register(url: string): void {
+        if (LinkCache.cache[url]) {
+            return;
+        }
+
+        LinkCache.cache[url] = LinkCache.createPreloadLink(url);
+    }
+
+    static dispose(url: string): void {
+        LinkCache.cache[url]?.remove();
+
+        delete LinkCache.cache[url];
+    }
+}
+
+// TODO: remove export when old ui is removed
+export function preloadImage(url: string): () => void {
+    LinkCache.register(url);
+
+    return () => LinkCache.dispose(url);
+}
+
+function hasExpectedImage(image: ImageEntity): image is ImageEntityFail | ImageEntitySuccess | ImageEntityUpdated {
+    return Object.hasOwn(image, 'expectedImg');
+}
+
+function hasActualImage(image: ImageEntity): image is ImageEntityFail | ImageEntityCommitted | ImageEntityError | ImageEntityStaged {
+    return Object.hasOwn(image, 'actualImg');
+}
+
+function hasDiffImage(image: ImageEntity): image is ImageEntityFail {
+    return Object.hasOwn(image, 'diffImg');
+}
+
+function hasRefImage(image: ImageEntity): image is ImageEntityFail {
+    return Object.hasOwn(image, 'refImg');
+}
+
+export function preloadImageEntity(image: ImageEntity): () => void {
+    const disposeCallbacks: (() => void)[] = [];
+
+    if (hasExpectedImage(image)) {
+        disposeCallbacks.push(preloadImage(image.expectedImg.path));
+    }
+
+    if (hasActualImage(image)) {
+        disposeCallbacks.push(preloadImage(image.actualImg.path));
+    }
+
+    if (hasDiffImage(image)) {
+        disposeCallbacks.push(preloadImage(image.diffImg.path));
+    }
+
+    if (hasRefImage(image)) {
+        disposeCallbacks.push(preloadImage(image.refImg.path));
+    }
+
+    return () => disposeCallbacks.forEach(dispose => dispose());
+}

lib/static/modules/utils/index.js

@@ -160,10 +160,6 @@ export function parseKeyToGroupTestsBy(key) {
     return [groupSection, groupKey];
 }
 
-export function preloadImage(url) {
-    new Image().src = url;
-}
-
 export function getBlob(url) {
     return new Promise((resolve, reject) => {
         const xhr = new XMLHttpRequest();

lib/static/new-ui/components/SuiteTitle/index.tsx

@@ -49,9 +49,9 @@ export function SuiteTitle(props: SuiteTitlePropsInternal): ReactNode {
         </div>
         <div className={styles.paginationContainer}>
             <span className={styles.counter}>{props.index === -1 ? '–' : props.index + 1}/{props.totalItems}</span>
-            <Button view={'flat'} disabled={props.index <= 0} onClick={props.onPrevious}><Icon
+            <Button qa='suite-prev' view={'flat'} disabled={props.index <= 0} onClick={props.onPrevious}><Icon
                 data={ChevronUp}/></Button>
-            <Button view={'flat'} disabled={props.index < 0 || props.index === props.totalItems - 1} onClick={props.onNext}><Icon
+            <Button qa='suite-next' view={'flat'} disabled={props.index < 0 || props.index === props.totalItems - 1} onClick={props.onNext}><Icon
                 data={ChevronDown}/></Button>
         </div>
     </div>;

lib/static/new-ui/features/visual-checks/components/VisualChecksPage/index.tsx

@@ -1,14 +1,15 @@
 import {ArrowUturnCcwLeft, Check} from '@gravity-ui/icons';
 import {Button, Divider, Icon, Select} from '@gravity-ui/uikit';
 import classNames from 'classnames';
-import React, {ReactNode} from 'react';
+import React, {ReactNode, useEffect, useRef} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 
 import {SplitViewLayout} from '@/static/new-ui/components/SplitViewLayout';
 import {UiCard} from '@/static/new-ui/components/Card/UiCard';
 import {
     getCurrentImage,
     getCurrentNamedImage,
+    getImagesByNamedImageIds,
     getVisibleNamedImageIds
 } from '@/static/new-ui/features/visual-checks/selectors';
 import {SuiteTitle} from '@/static/new-ui/components/SuiteTitle';
@@ -28,6 +29,32 @@ import {
 } from '@/static/new-ui/features/visual-checks/components/VisualChecksPage/AssertViewResultSkeleton';
 import {thunkAcceptImages, thunkRevertImages} from '@/static/modules/actions/screenshots';
 import {useAnalytics} from '@/static/new-ui/hooks/useAnalytics';
+import {preloadImageEntity} from '../../../../../modules/utils/imageEntity';
+
+export const PRELOAD_IMAGES_COUNT = 3;
+
+const usePreloadImages = (
+    currentNamedImageIndex: number,
+    visibleNamedImageIds: string[]): void => {
+    const preloaded = useRef<Record<string, () => void | undefined>>({});
+
+    const namedImageIdsToPreload: string[] = visibleNamedImageIds.slice(
+        Math.max(0, currentNamedImageIndex - 1 - PRELOAD_IMAGES_COUNT),
+        Math.min(visibleNamedImageIds.length, currentNamedImageIndex + 1 + PRELOAD_IMAGES_COUNT)
+    );
+
+    const imagesToPreload = useSelector((state) => getImagesByNamedImageIds(state, namedImageIdsToPreload));
+
+    useEffect(() => {
+        imagesToPreload.forEach(image => {
+            preloaded.current[image.id] = preloadImageEntity(image);
+        });
+    }, [currentNamedImageIndex]);
+
+    useEffect(() => () => {
+        Object.values(preloaded.current).forEach(disposeCallback => disposeCallback?.());
+    }, []);
+};
 
 export function VisualChecksPage(): ReactNode {
     const dispatch = useDispatch();
@@ -41,6 +68,8 @@ export function VisualChecksPage(): ReactNode {
     const onPreviousImageHandler = (): void => void dispatch(visualChecksPageSetCurrentNamedImage(visibleNamedImageIds[currentNamedImageIndex - 1]));
     const onNextImageHandler = (): void => void dispatch(visualChecksPageSetCurrentNamedImage(visibleNamedImageIds[currentNamedImageIndex + 1]));
 
+    usePreloadImages(currentNamedImageIndex, visibleNamedImageIds);
+
     const diffMode = useSelector(state => state.view.diffMode);
     const onChangeHandler = (diffModeId: DiffModeId): void => {
         dispatch(setDiffMode({diffModeId}));

lib/static/new-ui/features/visual-checks/selectors.ts

@@ -111,6 +111,25 @@ export const getCurrentImage = (state: State): ImageEntity | null => {
     return getImages(state)[currentImageId];
 };
 
+export const getImagesByNamedImageIds = (state: State, names: string[]): ImageEntity[] => {
+    const results: ImageEntity[] = [];
+
+    const images = getImages(state);
+    const namedImages = getNamedImages(state);
+
+    for (const name of names) {
+        const namedImage = namedImages[name];
+
+        if (!namedImage) {
+            continue;
+        }
+
+        results.push(...namedImage.imageIds.map(id => images[id]));
+    }
+
+    return results;
+};
+
 export const getVisibleNamedImageIds = createSelector([getNamedImages], (namedImages): string[] => {
     return Object.values(namedImages).map(namedImage => namedImage.id);
 });

test/unit/lib/static/components/modals/screenshot-accepter/index.jsx

@@ -43,8 +43,10 @@ describe('<ScreenshotAccepter/>', () => {
 
         preloadImageStub = sandbox.stub();
 
+        preloadImageStub.returns(() => void 0);
+
         ScreenshotAccepter = proxyquire('lib/static/components/modals/screenshot-accepter', {
-            '../../../modules/utils': {preloadImage: preloadImageStub}
+            '../../../modules/utils/imageEntity': {preloadImage: preloadImageStub}
         }).default;
     });
 

test/unit/lib/static/new-ui/features/visual-checks/components/VisualChecksPage.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import {addBrowserToTree, addImageToTree, addResultToTree, addSuiteToTree, mkBrowserEntity, mkEmptyTree, mkImageEntityFail, mkRealStore, mkResultEntity, mkSuiteEntityLeaf, renderWithStore} from '../../../../utils';
+import proxyquire from 'proxyquire';
+
+describe('<VisualChecksPage />', () => {
+    const sandbox = sinon.sandbox.create();
+
+    const prepareTestStore = () => {
+        const tree = mkEmptyTree();
+
+        const suite = mkSuiteEntityLeaf(`test-1`);
+        addSuiteToTree({tree, suite});
+
+        const browser = mkBrowserEntity(`bro-1`, {parentId: suite.id});
+        addBrowserToTree({tree, browser});
+
+        const result = mkResultEntity(`res-1`, {parentId: browser.id});
+        addResultToTree({tree, result});
+
+        for (const i of Array.from({length: 10}).map((_, i) => i + 1)) {
+            const image = mkImageEntityFail(`img-${i}`, {parentId: result.id});
+            addImageToTree({tree, image});
+        }
+
+        const store = mkRealStore({
+            initialState: {
+                app: {
+                    isInitialized: true
+                },
+                tree
+            }
+        });
+
+        return store;
+    };
+
+    let store;
+    let preloadImageEntityStub;
+
+    beforeEach(() => {
+        preloadImageEntityStub = sandbox.stub();
+
+        store = prepareTestStore();
+
+        const VisualChecksPage = proxyquire('lib/static/new-ui/features/visual-checks/components/VisualChecksPage', {
+            '../../../../../modules/utils/imageEntity': {preloadImageEntity: preloadImageEntityStub}
+        }).VisualChecksPage;
+
+        renderWithStore(<VisualChecksPage />, store);
+    });
+
+    afterEach(() => {
+        sandbox.restore();
+    });
+
+    it('should preload current and 3 adjacent images on mount', async () => {
+        const state = store.getState();
+        const orderedImages = Object.values(state.tree.images.byId);
+
+        for (let i = 0; i < 3; i++) {
+            assert.calledWith(
+                preloadImageEntityStub,
+                orderedImages[i]
+            );
+        }
+    });
+});