Prevent Custom-element from beeing rebuilt

Learn
1

I have made a custom-element to render a PDF page using pdfjs functions.
My model is a Dict of pdf documents where key is documentNumber, and value is (WebData PdfModel)
I render multiple pdfs on a single page, and line them up so that document-connectors in one document line up to the connector in another PDF-document.
I’m using elm-ui for everything exept the custom element.

Problem:
Elm destroys my first custom element and rebuilds it when adding anything to the Dict.
( I have tried lazy and keyed on the viewfunction that renders a Dict value )
I want to prevent the pdf from beeing rebuilt/rerendered as this creates flickering and unwanted use of resources when clicking a link to the next drawing.

Any ideas how to prevent elm from destroying my custom-element on Dict inserts ?

1 Like
2

I had the same problem last week.
Where elements with “their own created state” got rebuild by elm, which caused flickering.

What helped for me was to put those elements on top of the list of elements. And only add or remove elements lower in the list. It looks like elm is keeping elements in place, until it finds an element that changed. Then it will rebuild from there.

For example this is how I got it to work (written in html/pseudo-code but you will get the point else just ask for clarification)

<div>
    <div>
        <my-animating-element></my-animating-element>
        <my-animating-element></my-animating-element>
        <my-animating-element></my-animating-element>
    </div>
    <div>
        ... The rest of my website which changes a lot ...
    </div>
</div>
3

If you use Html.Keyed with for example your Dict keys as unique identifiers (converted to strings), Elm should keep your nodes until you change their identifier, even if you insert some before or change their order.

3 Likes
4

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.