[Designer]Page provider, generated result page is changed by magic and does not work

This is a difficult bug to explain, easier to follow the steps and reproduce.
Step to reproduce:

• Create a page provider in modeler
• Go to designer
• Generate the result page
• Click in switch to code.

This is the layout generated:

<!--
`nuxeo-contract_provider-search-results`
@group Nuxeo UI
@element nuxeo-contract_provider-search-results
-->
<dom-module id="nuxeo-contract_provider-search-results">
  <template>
    <style include="nuxeo-styles">
      nuxeo-data-table,
      nuxeo-data-grid,
      nuxeo-data-list,
      nuxeo-justified-grid {
        display: block;
        position: relative;
        min-height: calc(100vh - 130px - var(--nuxeo-app-top));
      }
      nuxeo-justified-grid {
        height: calc(100vh - 10em);
      }
    </style>
    <nuxeo-results name="contract_provider" nx-provider="[[nxProvider]]" selected-items="{{selectedItems}}">
      <nuxeo-data-grid name="grid" icon="nuxeo:view-thumbnails" class="results" empty-label="[[i18n('searchResults.noResults')]]"
                       sort-label="[[i18n('searchResults.sort.label')]]" selection-enabled display-quick-filters>
        <template>
          <nuxeo-document-grid-thumbnail tabindex$="{{tabIndex}}" selected$="{{selected}}" doc="[[item]]" index="[[index]]"
                                         on-navigate="_navigate" selected-items="[[selectedItems]]">
          </nuxeo-document-grid-thumbnail>
        </template>
      </nuxeo-data-grid>
      <nuxeo-data-table name="table" icon="nuxeo:view-list" class="results"
                        settings-enabled
                        empty-label="[[i18n('searchResults.noResults')]]"
                        selection-enabled
                        display-quick-filters
                        on-row-clicked="_navigate">

        <nuxeo-data-table-column name="Title" field="dc:title" sort-by="dc:title" flex="100">
          <template>
            <nuxeo-document-thumbnail document="[[item]]"></nuxeo-document-thumbnail>
            <a class="ellipsis" href$="[[urlFor('browse', item.path)]]" on-click="_navigate">[[item.title]]</a>
          </template>
        </nuxeo-data-table-column>

        <nuxeo-data-table-column name="Modified" field="dc:modified" sort-by="dc:modified" flex="50">
          <template>
            [[formatDate(item.properties.dc:modified)]]
          </template>
        </nuxeo-data-table-column>

        <nuxeo-data-table-column name="Last Contributor" field="dc:lastContributor" sort-by="dc:lastContributor"
                                 flex="50">
          <template>
            <nuxeo-user-tag user="[[item.properties.dc:lastContributor]]"></nuxeo-user-tag>
          </template>
        </nuxeo-data-table-column>
      </nuxeo-data-table>

    </nuxeo-results>
  </template>
  <script>
  Polymer({
    is: 'nuxeo-contract_provider-search-results',
    behaviors: [Nuxeo.LayoutBehavior],
    properties: {
      nxProvider: Object
    },

    _navigate: function(e) {
      this.fire('navigate', {doc: (e.model || e.detail).item});
    }
  });
  </script>
</dom-module>

• Click on the edit button for the table layout
• Click on switch to code

  <!--
  `nuxeo-contract_provider-search-results`
  @group Nuxeo UI
  @element nuxeo-contract_provider-search-results
  -->
  <dom-module id="nuxeo-contract_provider-search-results">
    <template>
      <style include="nuxeo-styles">
        nuxeo-data-table,
        nuxeo-data-grid,
        nuxeo-data-list,
        nuxeo-justified-grid {
          display: block;
          position: relative;
          min-height: calc(100vh - 130px - var(--nuxeo-app-top));
        }
        nuxeo-justified-grid {
          height: calc(100vh - 10em);
        }
      </style>
      <nuxeo-results name="contract_provider" nx-provider="[[nxProvider]]" selected-items="{{selectedItems}}">
        <nuxeo-data-grid name="grid" icon="nuxeo:view-thumbnails" class="results" empty-label="[[i18n('searchResults.noResults')]]" sort-label="[[i18n('searchResults.sort.label')]]" selection-enabled="" display-quick-filters="">
          <template>
            <nuxeo-document-grid-thumbnail tabindex$="{{tabIndex}}" selected$="{{selected}}" doc="[[item]]" index="[[index]]" on-navigate="_navigate" selected-items="[[selectedItems]]">
            </nuxeo-document-grid-thumbnail>
          </template>
        </nuxeo-data-grid>
  
        <nuxeo-data-table before-cell-bind="" before-details-bind="" before-row-bind="" settings-enabled="false" class="results" empty-label="[[i18n('searchResults.noResults')]]" selection-enabled="" display-quick-filters="" on-row-clicked="_navigate" icon="nuxeo:view-list" name="table">
          <nuxeo-data-table-column name="Title" field="dc:title" sort-by="dc:title" flex="100">
            <template>
              <nuxeo-document-thumbnail document="[[item]]"></nuxeo-document-thumbnail><a class="ellipsis" href$="[[urlFor('browse', item.path)]]" on-click="_navigate">[[item.title]]</a>
  
            </template>
          </nuxeo-data-table-column>
          <nuxeo-data-table-column name="Modified" field="dc:modified" sort-by="dc:modified" flex="50">
            <template>
              [[formatDate(item.properties.dc:modified)]]
  
            </template>
          </nuxeo-data-table-column>
          <nuxeo-data-table-column name="Last Contributor" field="dc:lastContributor" sort-by="dc:lastContributor" flex="50">
            <template>
              <nuxeo-user-tag user="[[item.properties.dc:lastContributor]]"></nuxeo-user-tag>
            </template>
          </nuxeo-data-table-column>
        </nuxeo-data-table>
      </nuxeo-results>
    </template>
    <script>
    Polymer({
      is: 'nuxeo-contract_provider-search-results',
      behaviors: [Nuxeo.LayoutBehavior],
      properties: {
        nxProvider: Object
      },
  
      _navigate: function(e) {
        this.fire('navigate', {doc: (e.model || e.detail).item});
      }
    });
    </script>
  </dom-module>
  

  I noticed that we have a lot of properties that are added with no values for ex: before-cell-bind="" before-details-bind="" before-row-bind="" that breaks the screem so whenever I hotreload my configuration, my table is broken + there's indent is completely different.