Batched the getBoundingClientRect and style changes and added an IntersectionObserver

[cefaci]

Hi! I experienced a lot of layout reflows causing by GetBoundingClientRect and style reads/writes while loading pages >10, so I tried to batch the GetBoundingClientRect calls and separate css reads/writes.
I added a second option with an IntersectionObserver.

[wojtekmaj]

Hi! This is a neat contribution, but will be quickly overwritten by #944 🤔 On top of that, merging it would also require bumping major version, because IntersectionObserver still requires polyfill for some of browsers we support.

[cefaci]

Hi! Thanks, I will update it for #944 and could just push w/o IntersectionObserver and make the batch optional?

[wojtekmaj]

I believe it won't be necessary now that #944 is merged. Correct me if I'm wrong please.

[cefaci]

I like it! Great work, thanks! Tested the beta.

I just passed me the element in Page/TextLayer.jsx too, to change the innerHMTL for e.g. highlighting later:

      cancellable.promise
      .then(() => {
        if (customTextRenderer) {
          Array.from(this.layerElement.current.children).forEach((element, elementIndex) => {
            const reactContent = customTextRenderer({
              element, // Here
              itemIndex: elementIndex,
              ...textContent.items[elementIndex],
            });
            element.innerHTML = renderToStaticMarkup(reactContent);
          });
        }
        this.onRenderSuccess();
      })
      .catch((error) => {
        this.onRenderError(error);
      });