DOM is not getting updated

[andruschka]

I have a yo-yo function that takes an object param with an array -> checkpoints and and a bool -> showAllCheckpoints. When showAllCheckpoints is false or undefined I slice the checkpoints array to 3 items. If the showAllCheckpoints flag is set to true, I dont do that. The checkpoints then get mapped to further yo-yo functions that generates Elems. The problem now: when I update yo-yo with "showAllCheckpoints: true" the DOM does not get updated. I log the checkpoints.length before returning the yo-yo temp. string and it is logged right: first with length = 3 and then after updating with length = 7. Am I doing something wrong???

[andruschka]

const TrackingBody = ({ checkpoints,  showAllCheckpoints }) => {
  let tCheckpoints = prepareCheckpoints(checkpoints)
  let moreButton = null

  if (tCheckpoints.length > 3 && !showAllCheckpoints) {
    moreButton = MoreButton(T.translate('more', query.lang.code))
    tCheckpoints = tCheckpoints.slice(0, 3)
  }    

  console.log(tCheckpoints.length)

  return html`
    <div class="parcel_lab_tracking" id="pl-t-${tHeader.id}">
      <div class="pl-box-body">

          <div class="pl-padded">
            ${ tCheckpoints.map(tCp => Checkpoint(tCp)) }
            ${ moreButton }
          </div>

        </div>
...

[andruschka]

The showAllCheckpoints is getting updated correctly, -> the TrackingBody() funciton is rerun but the dom does not change ...

[andruschka]

Ok I think I fixed it but I am not sure if it is a bug or maybe I am just stupid... The TrackingBody element is wrapped by an App element, which is the root of the app. There I had following line:

const App = state => {
  if (!state.query || !state.checkpoints) return html`<span>Loading</span>`  // <~ this caused the bug

  const trackingBody = TrackingBody(state)

  return html`<div>${ trackingBody } ... some more components ... </div>`

After removing the line, everything works fine again...