[FEATURE] - Blocks Lazy Loading

[volfkarlo]

We might take a look at lazy loading of the blocks inside the boilerplate. It might lower the initial load size and reduce the main thread execution time.

This is the idea:

import React from 'react';
import { props } from '@eightshift/frontend-libs/scripts';
import { GridEditor as GridEditorComponent } from '../../../components/grid/components/grid-editor';

export const GridEditor = ({
    clientId,
    attributes,
    isSelected,
    setAttributes,
    showGridGuides
}) => {

    return (
        <GridEditorComponent
            {...props('grid', attributes, {
                setAttributes,
            })}
            showGridGuides={showGridGuides}
            clientId={clientId}
            isSelected={isSelected}
        />
    );
};

export default GridEditor;

Notice the default export at the end

import React, { useState, Suspense } from 'react';
import { InspectorControls } from '@wordpress/block-editor';

export const Grid = (props) => {
    const [showGridGuides, setShowGridGuides] = useState(true);

    const GridOptions = React.lazy(() => import('./components/grid-options'));
    const GridEditor = React.lazy(() => import('./components/grid-editor'));

    return (
        <>
            <InspectorControls>
                <Suspense fallback={<>Loading...</>}>
                    <GridOptions {...props} showGridGuides={showGridGuides} setShowGridGuides={setShowGridGuides} />
                </Suspense>
            </InspectorControls>
            <Suspense fallback={<>Loading...</>}>
                <GridEditor {...props} showGridGuides={showGridGuides} />
            </Suspense>
        </>
    );
};

Pontentially we can build up some kind of helper for solving this, something like:

const lazying = (url) => {
  const Component = React.lazy(() => import(url));
  return (
  <Suspense fallback={<div>loading...</div>}>
    <Component />
  </Suspense>
  );
};

But in a way that it works(this solution doesn't work).

What you are suppose to get is something like this inside the editor part notice the additional file next to *Editor.js

@goranalkovic-infinum and I've tested it out, the savings for Grid block are measured in KBs but it might make a difference if everything is written in that way. I don't think this should be high on the priority list for testing, but potentially something to look into.

KR, Karlo

[mbmjertan]

I think this will make a noticeable impact on block editor performance on sites with a large number of blocks, given all blocks are imported by default.

I also considered something like this for the frontend with the intersection observer API, but I'm not sure whether the overhead of observers plus network requests will make it a net positive impact.