Page loading time is increasing with respect to RichTextIcon insert (conditionally)

Hi,

I have a editable grid where I have to show/hide icons as shown in below image based on some condition.

Code :

a!localVariables(
  local!users: { "User-1", "User-2", "User-3","User-4","User-5","User-6", "User-7", "User-8","User-9","User-10" },
  local!timeValues : {"3:00 AM","3:30 AM","4:00 AM","4:30 AM","5:00 AM","5:30 AM","6:00 AM","6:30 AM","7:00 AM","7:30 AM","8:00 AM","8:30 AM","9:00 AM","9:30 AM","10:00 AM","10:30 AM","11:00 AM","11:30 AM","12:00 PM","12:30 PM","1:00 PM","1:30 PM","2:00 PM","2:30 PM","3:00 PM","3:30 PM","4:00 PM","4:30 PM","5:00 PM","5:30 PM","6:00 PM","6:30 PM","7:00 PM","7:30 PM","8:00 PM","8:30 PM","9:00 PM","9:30 PM","10:00 PM","10:30 PM","11:00 PM","11:30 PM","12:00 AM","12:30 AM","1:00 AM","1:30 AM","2:00 AM","2:30 AM"},
  local!showHide: timevalue("5:00 AM")>totime("4:00 AM"),
  {
    a!gridLayout(
      labelPosition: "COLLAPSED",
      headerCells: {
        a!gridLayoutHeaderCell(label: "Time", align: "CENTER"),
        a!forEach(
          items: local!users,
          expression: a!gridLayoutHeaderCell(label: fv!item, align: "CENTER")
        )
      },
      columnConfigs: {},
      rows: {
        a!forEach(
          items: local!timeValues,
          expression: {
            a!gridRowLayout(
              contents: {
                a!richTextDisplayField(
                  label: "Time",
                  labelPosition: "COLLAPSED",
                  value: fv!item,
                  align: "CENTER"
                ),
                a!localVariables(
                  local!zoneTime: fv!item,
                  a!forEach(
                    items: local!users,
                    expression: {
                      a!localVariables(
                        local!showHide: and(timevalue(local!zoneTime)>totime("4:00 AM"),timevalue(local!zoneTime)<totime("7:00 AM")),
                        if(local!showHide,
                          a!richTextDisplayField(
                            labelPosition: "COLLAPSED",
                            value: a!richTextIcon(
                                icon: "check-circle-o",
                                caption: "Test",
                                color: "#800000",
                                size: "STANDARD"
                              ),
                            align: "CENTER"
                          ),
                          a!textField(readOnly: true)
                        )
                      )
                    }
                  )
                )
              }
            )
          }
        )
      },
      height: "TALL",
      validations: {},
      shadeAlternateRows: true
    )
  }
)

The issue with this grid is as many RichTextIcons gets inserted based on condition the page loading time is increasing.

Please help me manage the page loading time.