DevOps, CI/CD and Automation

JET Version: 10.0
Hi JET Community
We are using the Editable Form Table pattern from the Cookbook with BufferingDataProvider.
We are seeing some strange behaviour when trying to pre-load rows in the ViewModel constructor prior to the page loading. Regardless of whether we insert a row into the array backing the data provider or insert a row using BufferingDataProvider.addItem(), the row does not show in the table. On closer inspection, the row data is in the DOM tree but it is hidden. On inserting another row after the table has rendered, both rows then show in the table.
Here’s what we have:
ViewModel:

this.dataArray = ko.observableArray([{
                    code: "GRADE",
                    label: "Grade"
                }]);


this.dataProvider = new BufferingDataProvider(new ArrayDataProvider(self.dataArray, {
    keyAttributes: "code",
}));

HTML:

<oj-table id="at-lov-map" data="[[dataProvider]]" class="oj-sm-width-full"
                            on-oj-before-row-edit='[[Utils.beforeRowEditListener]]' 
                            edit-mode='rowEdit' edit-row='{{Utils.editRow}}'
                            on-oj-before-row-edit-end='[[Utils.beforeRowEditEndListener]]' 
                            columns='[
                                {
                                    "field": "code",
                                    "headerText": "Field",
                                    "width": "30%",
                                    "sortable": "disabled"
                                },
                                {
                                    "field":"label",
                                    "headerText": "Label",
                                    "width": "20%",
                                    "sortable":"disabled"
                                }]'>
                                
    <template slot='rowTemplate' data-oj-as='row'>

        <oj-bind-if test="[[row.mode === 'navigation']]">

            <td>
                <oj-bind-text value="[[row.item.data.code]]"></oj-bind-text>
            </td>


            <td>
                <oj-bind-text value="[[row.item.data.label]]"></oj-bind-text>
            </td>
            
        </oj-bind-if>
        
        <oj-bind-if test="[[row.mode === 'edit']]">

            <!-- Edit form here, removed for readability -->

        </oj-bind-if>

    </template>
                                    
</oj-table>

Here's what we see on initial page load:

After performing a button action to add a row using BufferingDataProvider.addItem(), here's what we see:
Both rows become visible.
The problem is because on initial load, the <tbody> tag has style 'visibility: hidden;' which is hiding the row.
Manually removing the style from the developer console enables the row data to be visible.
Is this a bug or a problem with how we are initially loading the table data? Can anyone help?
Incidentally, we have tried moving the insert of the row to the connected() function and this makes no difference.
Many thanks!