Why is there a long "busy" time when drawing gridlayout

Hi MATLAB'ers

I am developing an app in app designer where I want to have a dashboard-like tableoverview with 40-60 rows and 16 columns. For this I am using gridlayout because I need:

• multilines in some cells
• Images in some cells

It only takes about 3-4 seconds to run the code and prepare the gridlayout, but MATLAB keeps "busy" for additional 20-40 seconds. How can this be and is there anything I can do to optimize speed performance?

I am doing this in app designer and want to show the grid in a panel. However, I have written some dummy data below as an example for creating the grid in a figure, by running the script.

    clear
%%PREPARE DUMMY DATA
    NoOfRows =  60;
    testData= cell(NoOfRows,16);
    
    for h = 1:16
        testData(:,h) =  cellstr(char(randi([65 80],NoOfRows,1)));
    end
    
    testData = cell2table(testData);   
    testData.Properties.VariableNames = {'Navn','blabla','F','Team','I/S','Veg','Fisk','RF','Mandag','Tirsdag','Onsdag','Torsdag','Fredag','Bemærkninger','Møder','Start/slut'};

%%PREPARE GRID LAYOUT
    BottonFontColor = [0 0 1];
    CellColor = [0.2 0.4 0.6];
    FullHeaderColor = [0 0 0.5];
    
    
    TestColor1 = [0.1 0.1 0.1];
    TestColor2 = [0.6 0.6 0.6];
    TestColor3 = [1 1 1];
    TestColor4 = [0.4 0.4 0.4];
    TestColor5 = [0.5 0.5 0.5];
    TestColor6 = [0.6 0.6 0.6];
    TestColor7 = [0.7 0.7 0.7];
    TestColor8 = [0.8 0.8 0.8];
    TestColor9 = [0.9 0.9 0.9];
    TestColor10 = [0.1 0.1 1.0];

    
    %Create gridlayout
    fig = uifigure('Position',[100 100 440 320]);
    grid = uigridlayout(fig,[height(testData) 16],'Scrollable','on');
    grid.Visible = 'off';
    
    %Set grid properties 
    grid.ColumnSpacing = 0;
    grid.RowSpacing = 0;
    RowHeight = cell(1,height(testData));
    RowHeight(:) = {90};
    RowHeight(1) = {45};
    grid.RowHeight = RowHeight;
    grid.ColumnWidth = {100,25,100,35,35,35,35,'1x','1x','1x','1x','1x',230,110,65,50};
        
    %Vectorize Data table
    test = table2cell(testData);
    test = test';
    test = test(:);    
    
    %create a table row indicator correlated to the original table dimensions
    row = 0;
    %loop over every cell in the vectorized table (cellarray)
    for i = 1:height(testData)*16
        % returns the remainder after division of i by 16
        n = mod(i,16);
        switch n
            case 1 %Name
                row = row+1;
                if row == 1
                    uit = uitextarea(grid,'Value', test{i},"FontSize",14,'Editable','on');
                    uit.BackgroundColor = FullHeaderColor;
                else
                    uit = uibutton(grid,'Text','Test1');
                    uit.FontColor = BottonFontColor;
                end
            case 2 %Fase
                uit = uitextarea(grid,'Value', test{i},"FontSize",14,'Editable','on');
                if row == 1
                    uit.BackgroundColor = FullHeaderColor;
                else
                    uit.BackgroundColor = CellColor;
                end
            case 3 %Team
                uit = uitextarea(grid,'Value', test{i},"FontSize",12,'Editable','on');
                if row == 1
                    uit.BackgroundColor = FullHeaderColor;
                else
                    uit.BackgroundColor = CellColor;
                end                    
            case 4 %I/S (icecream / snickers)
                 if row == 1
                    uit = uitextarea(grid,'Value', test{i},"FontSize",14,'Editable','on');
                    uit.BackgroundColor = FullHeaderColor;
                 else
                     uit = uitextarea(grid,'Value', "",'Editable','on');
                     uit.BackgroundColor = CellColor;
                 end
            case 5 %Veg
                 if row == 1
                    uit = uitextarea(grid,'Value', test{i},"FontSize",14,'Editable','on');
                    uit.BackgroundColor = FullHeaderColor;
                 else
                     uit = uitextarea(grid,'Value', "",'Editable','on');
                     uit.BackgroundColor = CellColor;
                 end
            case 6 %Fish
                if row == 1
                    uit = uitextarea(grid,'Value', test{i},"FontSize",14,'Editable','on');
                    uit.BackgroundColor = FullHeaderColor;
                else
                    uit = uitextarea(grid,'Value', "",'Editable','on');
                    uit.BackgroundColor = CellColor;
                end
            case 7 %Refeed
                uit = uitextarea(grid,'Value', test{i},"FontSize",14,'Editable','on');
                if row == 1
                    uit.BackgroundColor = FullHeaderColor;
                else
                    uit.BackgroundColor = CellColor;
                end                 
            case 8 %Mandag
                 if row == 1
                    uit = uitextarea(grid,'Value', test{i},"FontSize",16,'Editable','on');
                    uit.BackgroundColor = TestColor1;
                 else
                     uit = uitextarea(grid,'Value', test{i},"FontSize",14,'Editable','on');
                     uit.BackgroundColor = TestColor2;
                 end
            case 9 %Tirsdag
                 if row == 1
                    uit = uitextarea(grid,'Value', test{i},"FontSize",16,'Editable','on');
                    uit.BackgroundColor = TestColor3;
                 else
                     uit = uitextarea(grid,'Value', test{i},"FontSize",14,'Editable','on');
                     uit.BackgroundColor = TestColor4;
                 end
            case 10 %Onsdag
                 if row == 1
                    uit = uitextarea(grid,'Value', test{i},"FontSize",16,'Editable','on');
                    uit.BackgroundColor = TestColor5;
                 else
                     uit = uitextarea(grid,'Value', test{i},"FontSize",14,'Editable','on');
                     uit.BackgroundColor = TestColor6;
                 end
            case 11 %Torsdag
                 if row == 1
                    uit = uitextarea(grid,'Value', test{i},"FontSize",16,'Editable','on');
                    uit.BackgroundColor = TestColor7;
                 else
                     uit = uitextarea(grid,'Value', test{i},"FontSize",14,'Editable','on');
                     uit.BackgroundColor = TestColor8;
                 end
            case 12 %Fredag
                 if row == 1
                    uit = uitextarea(grid,'Value', test{i},"FontSize",16,'Editable','on');
                    uit.BackgroundColor = TestColor9;
                 else
                     uit = uitextarea(grid,'Value', test{i},"FontSize",14,'Editable','on');
                     uit.BackgroundColor = TestColor10;
                 end
            case 13 %Bemærkninger
                uit = uitextarea(grid,'Value', test{i},"FontSize",12,'Editable','on');
                if row == 1
                    uit.BackgroundColor = FullHeaderColor;
                else
                    uit.BackgroundColor = TestColor1;
                end
            case 14 %Statusmøde
                uit = uitextarea(grid,'Value', test{i},"FontSize",12,'Editable','on');
                if row == 1
                    uit.BackgroundColor = FullHeaderColor;
                else
                    uit.BackgroundColor = CellColor;
                end
            case 15 %Vægt
                if row == 1
                    uit = uitextarea(grid,'Value', "Vægt","FontSize",14,'Editable','on');
                    uit.BackgroundColor = FullHeaderColor;
                else 
                    uit = uibutton(grid,'Text',{'Blabla'});
                    uit.BackgroundColor = TestColor5;
                end
            case 0 %StartSlutDato
                uit = uitextarea(grid,'Value', test{i},"FontSize",14,'Editable','on');
                if row == 1
                    uit.BackgroundColor = FullHeaderColor;
                else
                    uit.BackgroundColor = TestColor6;
                end
        end
        
    end

    %Finalize gridlayout properties
    grid.Visible = 'on';

Answer 1

[Shaunak]

Hi @Johnny Birch,

It is my understanding that you are developing a dashboard-style table in App Designer using ‘uigridlayout’ and are experiencing delays where MATLAB stays busy for an extended time even after preparing the grid. This is a known issue when handling large numbers of UI components within a loop.

To improve performance, consider using ‘drawnow limitrate nocallbacks’ to throttle graphics rendering. This can reduce UI lag by limiting the number of updates per second and deferring redraws while the renderer is busy.

Also you can separate the UI creation from customization logic—create all components first, then assign properties to reduce overhead. You can pre-allocate handles to avoid dynamic memory growth and use ‘repmat’ when defining row heights for efficiency.

Kindly refer to the following resources for optimizing your App Designer UI performance:

• Improving graphics performance in MATLAB apps https://www.mathworks.com/help/matlab/creating_plots/improve-graphics-update-performance.html
• Getting and setting automatically calculated properties https://www.mathworks.com/help/matlab/creating_plots/getting-and-setting-automatically-calculated-properties.html
• Avoid repeatedly searching for UI objects https://www.mathworks.com/help/matlab///creating_plots/avoid-repeatedly-searching-for-objects.html

You can also check out this MATLAB Answers community forum thread that discusses performance issues when looping through grid layouts for further reference: https://www.mathworks.com/matlabcentral/answers/525912-loop-through-grid-layout-takes-forever-how-can-i-optimize-the-code

Hope this helps!