@shopify/app-bridge-host/esm/components/Performance.js

App Bridge Host contains components and middleware to be consumed by the app's host, as well as the host itself. The middleware and `Frame` component are responsible for facilitating communication between the client and host, and used to act on actions se

import { useState, useCallback, useEffect } from 'react';
import { Performance as Performance$1 } from '@shopify/app-bridge-core/actions';
import { useHostContext } from '../hooks/useHostContext.js';
import '@shopify/app-bridge-core/actions/Error';

function Performance(_a) {
    var initialLoadState = _a.initialLoadState, dispatchPerformanceMetrics = _a.dispatchPerformanceMetrics;
    var hostContext = useHostContext();
    var _b = useState(null), lastDispatchedLoadTypeMetric = _b[0], setLastDispatchedLoadTypeMetric = _b[1];
    var allowedDispatch = useCallback(function (incomingAppLoadType) {
        var alreadyProccessedIncomingAppLoadType = incomingAppLoadType === lastDispatchedLoadTypeMetric;
        var noFurtherDispatchesAllowed = lastDispatchedLoadTypeMetric === Performance$1.Action.FULL_PAGE_LOAD;
        if (noFurtherDispatchesAllowed || alreadyProccessedIncomingAppLoadType) {
            return false;
        }
        return true;
    }, [lastDispatchedLoadTypeMetric]);
    var subscribe = useCallback(function (actionType) {
        var app = hostContext.app, _a = hostContext.config, appId = _a.appId, shopId = _a.shopId;
        return app.subscribe(actionType, function () {
            // handle shopify_admin_app_load_event_timing/4.0 events
            // check if metrics can be dispatched and if the time origin at initial load is set
            if (allowedDispatch(actionType) && typeof (initialLoadState === null || initialLoadState === void 0 ? void 0 : initialLoadState.timeOrigin) === 'number') {
                setLastDispatchedLoadTypeMetric(actionType);
                dispatchPerformanceMetrics({
                    appId: appId,
                    shopId: shopId,
                    isFullPageNavigation: initialLoadState.isFullPageNavigation,
                    loadTime: Date.now() - initialLoadState.timeOrigin,
                    appLoadType: actionType,
                });
            }
            else {
                // eslint-disable-next-line no-console
                console.warn('Not allowed to dispatch further load metrics.');
            }
        });
    }, [hostContext, allowedDispatch, initialLoadState]);
    useEffect(function () {
        var _a = Performance$1.Action, SKELETON_PAGE_LOAD = _a.SKELETON_PAGE_LOAD, FULL_PAGE_LOAD = _a.FULL_PAGE_LOAD;
        var unsubscribeSkeletonLoad = subscribe(SKELETON_PAGE_LOAD);
        var unsubscribeFullLoad = subscribe(FULL_PAGE_LOAD);
        return function () {
            unsubscribeSkeletonLoad();
            unsubscribeFullLoad();
        };
    }, [subscribe]);
    return null;
}

export { Performance as default };