AG Grid Update() makes first column stutter on update

[hectibrown]

Question

imgur link to video and code

I am having a problem when updating an AG Grid, my entire grid stutters and it looks like my first column changes size and a scroll bar appears and disappears at the bottom.

Is there a why to make the update() smoother?

I have tried a couple of combinations but nothing seems to make it better including making the columns a fixed width of 300

update code snip:

    @ui.refreshable
    async def load_test_soln():
        #loop = True
        #while loop:
        print(f'{nb_solution_input.value}')
        #if switch_SaveOptiSoln.value:
        try:
            # Use the external function to fetch row_data
            row_data = fetch_row_data(session, TestSolution32, int(nb_solution_input.value))
         # Update agGrid's rowData with new data
            OptiTestgrid.options['rowData'] = row_data
            #OptiTestgrid.run_grid_method("refreshRows")
            OptiTestgrid.update()
        #await asyncio.sleep(5)  # Refresh every 5 seconds
        except Exception as e:
            raise RuntimeError(f"Error on TestSolution32 update: {e}")
        #else:
        #    await asyncio.sleep(5)`

ag grid (there are about 52 columns, i have omitted them to shorten the code snip):

def create_opti_aggrid():

    return ui.aggrid({
        'defaultColDef': {'flex': 1},
        'columnDefs': [
            {'headerName': 'DB ID', 'field': 'dbSolnId', 'filter': 'agTextColumnFilter', 'floatingFilter': True},
            {'headerName': 'DateTime', 'field': 'datetime', 'filter': 'agTextColumnFilter', 'floatingFilter': True},
            {'headerName': 'CmdID', 'field': 'dCmdId'},
            {'headerName': 'Lug Id', 'field': 'dLugId', 'filter': 'agTextColumnFilter', 'floatingFilter': True},
            {'headerName': '# Products', 'field': 'dNbProduct', 'filter': 'agTextColumnFilter', 'floatingFilter': True},
            {'headerName': 'Opti #', 'field': 'dOptiNumber', 'filter': 'agTextColumnFilter', 'floatingFilter': True},
            {'headerName': 'Thick Before', 'field': 'dThickBefore', 'filter': 'agTextColumnFilter', 'floatingFilter': True},
            {'headerName': 'Width Before', 'field': 'dWidthBefore', 'filter': 'agTextColumnFilter', 'floatingFilter': True},
            {'headerName': 'Length Before', 'field': 'dLengthBefore', 'filter': 'agTextColumnFilter', 'floatingFilter': True},
            {'headerName': 'Volume Before', 'field': 'dVolumeBefore'},
            {'headerName': 'Sprays B1', 'field': 'dSprays0'},
            {'headerName': 'Sprays B2', 'field': 'dSprays1'},
            {'headerName': 'Spare 1', 'field': 'dSpare1'},
            {'headerName': 'Spare 2', 'field': 'dSpare2'},
        ],
        'rowData': [
            {'dbSolnId': '1', 'datetime': '12:15', 'dLugId': '125'},
            {'dbSolnId': '2', 'datetime': '12:31', 'dLugId': '32'},
            {'dbSolnId': '3', 'datetime': '12:33', 'dLugId': '12'},
        ],
        'rowSelection': 'multiple'
    }).style('width: 5000px')#.classes('suppressChangeDetection=false')`
``

[hectibrown]

I have gotten it to stop flickering by adding the following:

defaultColDef': {'flex': 1, 'minWidth': 200},