Is there a way to progressively render many stages on a single html page?

[lanyusan]

I am using React Konva on a project that needs to render around 100 stages on a single html page. Each stage is obviously attached to a div.

Some times each stage is rather large, for example around 3000 x 3000.

With React, the 100 stages are rendered by mapping data array to Konva stage array. The html page would freeze until all are rendered.

Is there away to progressively render the stages, meaning render one, display one on page, then render the next one?

If Konva fires some event like finishedRenderring, it would be easy to do so but I couldn't find document about it.

Or is there a better way to do so?

[lavrton]

I think you should do just virtual scrolling technic. It is outside of Konva scope. Render stage only when it is visible on the screen. If it is not visible - don't render it.

[lanyusan]

Thanks. Tried it. A way to go but not most ideal in my case. The app would scale the stages down to fit around 6 stages in a row. Still a lot to render for large stages. It would freeze the page if around 3 rows are being rendered at once. But still more responsive than all 100 stages at once.

[lavrton]

What do you render in your stages? How do you scale them?

[lanyusan]

It is a nft generation tool, basically it mixes layers together randomly to generate many images. Layers are uploaded by user and have exactly the same size. Mostly at size of around 500 x 500 but occasionally 3000 x 3000 or bigger.

The code is really simple as below. scale is calculated as targetWidth / imageWidth. The stage size is set to targetWidth * targetHeight, where targetHeight is `scale * imageHeight

    <Stage
      scale={{ x: scale || 1, y: scale || 1 }}
    >
      <Layer>
        {layers.map((layer, index) => {
          return ( .... ) // render each layer simply
        })}
      </Layer>
    </Stage>

[lanyusan]

FYI We have opted to use plain old div and css to stack images together when rendering many generated nfts on a single page. The performance is improved dramatically.

But we still use Knova to eventually compose all layers to generate final output. It is a little bit overkill though even plain canvas would be enough but we decide to still use Konva in case we want to add effects or other editing functions.

Thanks again for this great library.