Need input: Spaces with apps and notifications -> performance issues

[d4rkd3v1l]

I'd like to have a spaces section as follows:

• One group (bracket) per space
• One icon (item) using sketchybar-app-font per app (actually per window ;-))
• I'm using dracula theme and like to have an accent color per space -> selected state of space as well as janky borders for active window
• I want some kind of notification indicator, maybe change the icon (background) color or so -> that's the main reason for having one item per app vs. just using one item per space
• Maybe I want to integrate the "front app" into its space (displaying the name next to the icon, may be some kind of highlight)
• I'm using Aerospace for space management
• Sketchybar is setup using sbarlua

All the following are my current assumptions and/or ideas an may not be correct, so feel free to correct me^^

Brackets can only "hold" items set on creation. So it's not possible to change those later on. Therefore my approach is to use some kind of item (app) pool for each space (e.g. 4). That means during initialisation I will create 4 items per space and then just set "drawing true/false" and update the props (e.g. icon) as necessary.

While I got this working "logically" fine, I noticed (especially on multi-monitor setup), that the performance quite dropped, compared to the initial approach (one item per space, and just having the label "hold" multiple apps/icons), which @FelixKratz currently uses in his dotfiles. The switch to e.g. another space is very instant, so I guess aerospace is fine. But Sketchybar updates are kinda laggy.
Maybe I should not kinda brute-force update everything on "focus change" of aerospace? I already tried to batch updates via the shell api, using just one call with all the "set" calls in it.

However, maybe someone can help me with the following questions:

• How expensive are single "draw" calls vs. batched ones (I didn't really notice much or let say any difference at all)
• Is it much faster to call objects directly, instead of looking them up by name strings? (sbar.set("space." .. spaceIndex .. ".app." .. appIndex ... vs. some kind of object structure spaces[spaceIndex].apps[appIndex]:set(...)
• How bad is it to brute-force update everything instead of determining/diffing changes and just update whats needed
• Should my approach be a problem at all, or am I missing something completely different and all my considerations are probably not the problem in the first place? 🙈
• How do you guys set things up?

Any ideas, insights or help are highly appreciated :-)

Here is what my bar looks like now^^

Here's my current "spaces.lua" file (heavy WIP, dont judge too hard^^):

local colors = require("colors")
local icons = require("icons")
local settings = require("settings")
local appIcons = require("helpers.app_icons")

local spaces = {}
local maxAppsPerSpace = 4

local workspaces = get_workspaces() -- pulls stuff from aerospace
local current_workspace = get_current_workspace() -- pulls stuff from aerospace
local function split(str, sep)
  local result = {}
  local regex = ("([^%s]+)"):format(sep)
  for each in str:gmatch(regex) do
    table.insert(result, each)
  end
  return result
end

local function updateSpaces()
  for spaceIndex, workspace in ipairs(workspaces) do

    sbar.exec("aerospace list-windows --workspace " .. spaceIndex .. " --format '%{app-name}' --json ", function(apps)
      local selected = current_workspace == workspace
      local no_app = true

      -- Update space indicator
      sbar.set("space." .. spaceIndex .. ".app.0", {
        label = {
          highlight = selected,
        },
      })

      -- Update space (bracket) border
      sbar.set("space." .. spaceIndex, {
        background = {
          border_color = selected and colors.workspace_colors[spaceIndex] or colors.bg2
        }
      })

      -- Update apps (windows)
      sbar.animate("tanh", 10, function()
        for appIndex = 0, maxAppsPerSpace, 1 do
          local app = apps[appIndex]
          if app ~= nil then
            local appName = app["app-name"]
            local lookup = appIcons[appName]
            local icon = ((lookup == nil) and appIcons["default"] or lookup)

            sbar.set("space." .. spaceIndex .. ".app." .. appIndex, {
              drawing = true,
              icon = {
                drawing = true,
                string = icon,
                -- color = (appName == "Signal") and colors.pink or colors.white,
                highlight = selected,
              },
              label = {
                drawing = false,
                highlight = selected,
              },
              background = {
                -- color = (appName == "Signal") and colors.pink or colors.transparent,
              }
            })
          else
            sbar.set("space." .. spaceIndex .. ".app." .. appIndex, {
              drawing = (appIndex == 0) and true or false
            })
          end
        end

        -- Handle empty spaces
        if next(apps) == nil then
            sbar.set("space." .. spaceIndex .. ".app.1", {
              drawing = true,
              icon = {
                drawing = false,
              },
              label = {
                drawing = true,
                string = "—",
                highlight = selected,
              },
            })
        end
      end)
    end)
  end
end

-- initial setup
for spaceIndex, workspace in ipairs(workspaces) do
  local apps = {}
  for appIndex = 0, maxAppsPerSpace, 1 do
    local app = sbar.add("item", "space." .. spaceIndex .. ".app." .. appIndex, {
      drawing = (appIndex == 0) and true or false,
      icon = {
        drawing = false,
        font = settings.icons,
        padding_left = 5,
        padding_right = 5,
        color = colors.white,
        highlight_color = colors.workspace_colors[spaceIndex],
        highlight = selected
      },
      label = {
        drawing = (appIndex == 0) and true or false,
        padding_left = 10,
        padding_right = 6,
        color = colors.white,
        font = {
          family = settings.font.numbers,
          size = 14.0,
        },
        highlight_color = colors.workspace_colors[spaceIndex],
        highlight = selected,
        string = spaceIndex,
      },
      padding_left = 2,
      padding_right = 2,
      background = {
        height = 24,
        corner_radius = 8,
        color = colors.transparent,
        border_color = colors.transparent
      },
    })

    app:subscribe("mouse.clicked", function(env)
      local SID = split(env.NAME, ".")[2]
      sbar.exec("aerospace workspace --fail-if-noop " .. SID)
    end)

    apps[appIndex] = app.name
  end

  local space = sbar.add("bracket", "space." .. spaceIndex, apps, {
    background = {
      color = colors.bg1
    }
  })

  spaces[spaceIndex] = space

  sbar.add("item", "space." .. spaceIndex .. ".padding", {
    script = "",
    width = 5,
  })

  updateSpaces()
end

local space_window_observer = sbar.add("item", {
  drawing = false,
  updates = true
})

-- Handles the small icon indicator for spaces / menus changes
local spaces_indicator = sbar.add("item", "spaces", {
  drawing = false,
  padding_left = settings.group_paddings,
  icon = {
    padding_left = 8,
    padding_right = 9,
    color = colors.white,
    string = icons.spaces
  },
  label = {
    padding_left = 0,
    padding_right = 8,
    string = "Spaces",
    color = colors.white
  },
})

-- Event handles
space_window_observer:subscribe("aerospace_workspace_change", function(env)
  current_workspace = env.FOCUSED_WORKSPACE
end)

space_window_observer:subscribe("aerospace_focus_change", function(env)
  updateSpaces()
end)

spaces_indicator:subscribe("mouse.clicked", function(env)
  sbar.trigger("swap_menus_and_spaces")
end)