[Widget Performance] Slowdown on data-heavy, nested-list collection pages

[herpster]

Hello,

In your "successor-to-netlify-cms" section you mention the following imrpovement:

"No typing lag on input fields, especially within nested lists and objects."

Link: https://sveltiacms.app/en/docs/successor-to-netlify-cms#fn33

However the issue is still there and porbably even worse than it was on Decap CMS.
If you have nested-list collections it takes almost a minute before the content of the
collapsible is rendered, if you're trying to update the input field it takes even longer.
Unfortunately that makes it pretty much useless to use on any environment.

Issue on Decap CMS:
decaporg/decap-cms#6563

Is it possible to prioritize this issue since imo it is a crucial one?

Thanks for the great work on Sveltia CMS, much appreciated.

[kyoshino]

I have never seen the issue on Sveltia CMS. Please provide your configuration to reproduce the issue.

[kyoshino]

Actually, I have seen the rendering issue once before with an extremely large list on someone’s repository, which was supposed to be managed as an entry collection instead. They converted the data from somewhere else to a single, enormous JSON file, which wasn’t suitable for editing in the CMS. It’s indeed a performance issue but our priority is low, as users can better organize the content.

[herpster]

Thanks for the reply.

The CMS is used to manage global navigation / mega menus with multiple nested levels, which need to be edited as a single coherent structure so editors can understand hierarchy, ordering, and layout context.

This is a minimal representative excerpt that already reproduces the issue once nesting goes a few levels deep:

 - name: "company-header"
    label: "Company Header"
    folder: "public/cms"
    path: "company/{{slug}}"
    media_folder: "/public/img"
    public_folder: "/img"
    filter: { field: contentType, value: company_header }
    create: true
    i18n: true
    slug: "header"
    identifier_field: "name"
    extension: "json"
    format: "json"
    fields:
      - {label: "Template Key", name: "templateKey", widget: "hidden", default: "templates/note"}
      - {label: "Language", name: "language", widget: "hidden", default: "en"}
      - {label: "Content Type", name: "contentType", widget: "hidden", default: "company_header"}
      - {label: "Title", name: "title", widget: "hidden", default: "Company Header"}
      - {label: "Brand", name: "brand", widget: "hidden", default: "ACME"}
      - {label: "Search Term", name: "search", widget: "hidden", default: "Search"}
      - {label: "Back Button", name: "back", widget: "hidden", default: "Back"}
        
      # LEVEL 1: Navigation object
      - label: "Navigation"
        name: "nav"
        widget: "object"
        collapsed: false
        i18n: true
        description: "Global Navigation"
        fields:
          # LEVEL 2: Logo object
          - label: "logo"
            name: "logo"
            widget: "object"
            collapsed: true
            i18n: true
            fields:
              - {label: "Meta Category", name: "meta_category", widget: "string", default: "navigation", i18n: duplicate, required: false}
              - {label: "Meta Action", name: "meta_action", widget: "string", default: "menu_home", i18n: duplicate, required: false}
              - {label: "Meta Label", name: "meta_label", widget: "string", default: "https://www.example.com", i18n: duplicate, required: false}
              - {label: "Aria Label", name: "aria_label", widget: "string", default: "Company HOME", i18n: duplicate, required: false}
              
              # LEVEL 3: Image object
              - label: "Image"
                name: "img"
                widget: "object"
                collapsed: true
                i18n: true
                fields:
                  - {label: "Brand Logo", name: "url", widget: "image", choose_url: true, media_library: {config: {multiple: false}}}
                  - {label: "Alt Text", name: "alt_txt", widget: "string", default: "Company logo", i18n: true}
              
              # LEVEL 3: Image Transparent object
              - label: "Image Transparent"
                name: "img_transparent"
                widget: "object"
                collapsed: true
                i18n: true
                fields:
                  - {label: "Brand Logo", name: "url", widget: "image", choose_url: true, media_library: {config: {multiple: false}}}
                  - {label: "Alt Text", name: "alt_txt", widget: "string", default: "Company logo", i18n: true}
              
              # LEVEL 3: Link object
              - label: "link"
                name: "link"
                widget: "object"
                collapsed: true
                i18n: true
                fields:
                  - {label: "Label", name: "label", widget: "string", default: "ACME", i18n: true}
                  - {label: "URL", name: "url", widget: "string", default: "https://www.example.com/", i18n: true}
                  - {label: "Target", name: "target", widget: "select", options: ["_self", "_blank"], i18n: duplicate, default: "_self"}

          # LEVEL 2: Global Menu object
          - label: "Global Menu"
            name: "global_menu"
            widget: "object"
            collapsed: false
            i18n: true
            fields:
              # LEVEL 3: Main Menu object
              - label: "Main Menu"
                name: "main_menu"
                widget: "object"
                collapsed: false
                i18n: true
                fields:
                  # LEVEL 4: Main Menu Links list
                  - label: "Main Menu Links"
                    name: "main_menu_links"
                    widget: "list"
                    collapsed: true
                    summary: "{{fields.main_menu_label}}"
                    i18n: true
                    fields:
                      - {label: "Main Menu Label", name: "main_menu_label", widget: "string", default: "Main Menu Label", i18n: true}
                      # LEVEL 5: Main Menu Section object
                      - label: "Main Menu Section"
                        name: "main_menu_section"
                        widget: "object"
                        collapsed: true
                        i18n: true
                        fields:
                          - {label: "Main Menu Section Label", name: "main_menu_section_label", widget: "string", default: "Main Menu Section Label", i18n: true}
                          - {label: "Main Menu Section URL", name: "main_menu_section_url", widget: "string", default: "Main Menu Section URL", i18n: true}
                      - {label: "URL", name: "url", widget: "string", default: "#", i18n: true}
                      - {label: Target, name: target, widget: select, options: ["_self", "_blank"], i18n: duplicate, default: "_self"}
                      - {label: "Meta Category", name: "meta_category", widget: "string", default: "navigation", i18n: duplicate, required: false}
                      - {label: "Meta Action", name: "meta_action", widget: "string", default: "menu_home", i18n: duplicate, required: false}
                      - {label: "Meta Label", name: "meta_label", widget: "string", default: "https://www.example.com", i18n: duplicate, required: false}
                      
                      # LEVEL 5: Submenu Items list
                      - label: "Submenu Items"
                        name: "submenu"
                        widget: "list"
                        collapsed: true
                        summary: "{{fields.submenu_title}}"
                        hint: "Submenu sections (stacked, 1-column, or 2-column layouts)"
                        i18n: true
                        fields:
                          - {label: "Submenu Title", name: "submenu_title", widget: "string", default: "Submenu", i18n: true, required: false}
                          - {label: "Submenu Type", name: "submenu_type", widget: "select", options: ["stacked", "one_col", "two_col"], default: "stacked", i18n: duplicate}
                          - {label: "Has Background", name: "has_background", widget: "boolean", default: false, i18n: duplicate, required: false}
                          - {label: "Link Icon URL", name: "link_icon", widget: "image", choose_url: true, required: false, media_library: {config: {multiple: false}}}
                          - {label: "Submenu Label", name: "link_label", widget: "string", default: "Submenu Link", i18n: true}
                          - {label: "URL", name: "url", widget: "string", default: "javascript:void(0)", i18n: true, required: false}
                          - {label: Target, name: target, widget: select, options: ["_self", "_blank"], default: "_self", i18n: duplicate, required: false}
                          - {label: "Meta Category", name: "meta_category", widget: "string", default: "navigation", i18n: duplicate, required: false}
                          - {label: "Meta Action", name: "meta_action", widget: "string", default: "menu_home", i18n: duplicate, required: false}
                          - {label: "Meta Label", name: "meta_label", widget: "string", default: "https://www.example.com", i18n: duplicate, required: false}
                          
                          # LEVEL 6: Links list
                          - label: "Links"
                            name: "links"
                            widget: "list"
                            collapsed: true
                            summary: "{{fields.link_label}}"
                            i18n: true
                            required: false
                            fields:
                              - {label: "Link Icon URL", name: "link_icon", widget: "image", choose_url: true, required: false, media_library: {config: {multiple: false}}}
                              - {label: "Chevron", name: "chevron", widget: "boolean", default: false, i18n: duplicate, required: false}
                              - {label: "Shopping Cart Icon", name: "cart", widget: "boolean", default: false, i18n: duplicate, required: false}
                              - {label: "Render as CTA", name: "render_cta", widget: "select", options: ["default", "scream", "shout"], default: "default", i18n: duplicate, required: false}
                              - {label: "Brand Name", name: "brand_name", widget: "string", default: "", i18n: true, required: false}
                              - {label: "Link Label", name: "link_label", widget: "string", default: "Link", i18n: true, required: false}
                              - {label: "URL", name: "url", widget: "string", default: "#", i18n: true, required: false}
                              - {label: Target, name: target, widget: select, options: ["_self", "_blank"], default: "_self", i18n: duplicate, required: false}
                              - {label: "Aria Label", name: "aria_label", widget: "string", required: false, i18n: true}
                              - {label: "Meta Category", name: "meta_category", widget: "string", default: "navigation", i18n: duplicate, required: false}
                              - {label: "Meta Action", name: "meta_action", widget: "string", default: "menu_home", i18n: duplicate, required: false}
                              - {label: "Meta Label", name: "meta_label", widget: "string", default: "https://www.example.com", i18n: duplicate, required: false}
                          
                          # LEVEL 6: Image Links list
                          - label: "Image Links"
                            name: "img_links"
                            widget: "list"
                            collapsed: true
                            summary: "{{fields.img_label.link_label}}"
                            i18n: true
                            required: false
                            fields:
                              - {label: "Tag", name: "tag", widget: "string", default: "Tag", i18n: true, required: false}
                              - {label: "Tag Font Style", name: "tag_font_style", widget: select, options: ["light", "normal", "semibold", "bold"], default: "normal", required: false}
                              - {label: "Link Label", name: "link_label", widget: "string", default: "Submenu Link", i18n: true, required: false}
                              - {label: "Label Font Style", name: "label_font_style", widget: select, options: ["light", "normal", "semibold", "bold"], default: "normal", i18n: duplicate, required: false}
                              - {label: "Subtext", name: "subtext", widget: "string", default: "Second Line", i18n: true, required: false}
                              - {label: "Subtext Font Style", name: "subtext_font_style", widget: select, options: ["light", "normal", "semibold", "bold"], default: "normal", i18n: duplicate, required: false}
                              - {label: "URL", name: "url", widget: "string", default: "#", i18n: true, required: false}
                              - {label: Target, name: target, widget: select, options: ["_self", "_blank"], default: "_self", i18n: duplicate, required: false}
                              - {label: "Image URL", name: "image_url", widget: "image", choose_url: true, i18n: true, required: false, media_library: {config: {multiple: false}}}
                              - {label: "Alt Text", name: "alt_txt", widget: "string", default: "Image", i18n: true, required: false}
                              - {label: "Text Color Dark", name: "txt_color", widget: "boolean", hint: "If false: white text, if true: dark text", default: false, i18n: duplicate, required: false}
                              - {label: "Meta Category", name: "meta_category", widget: "string", default: "navigation", i18n: duplicate, required: false}
                              - {label: "Meta Action", name: "meta_action", widget: "string", default: "menu_home", i18n: duplicate, required: false}
                              - {label: "Meta Label", name: "meta_label", widget: "string", default: "https://www.example.com", i18n: duplicate, required: false}

Observed behavior:

• Expanding nested lists can take tens of seconds

• Typing in deeply nested inputs has severe lag

• UI appears frozen while rendering

By entry collections I understand managing menu items as separate entries (one file per item) instead of a single large navigation file. I see how this can improve CMS performance, since only one entry is rendered at a time.

I’ll definitely consider breaking the navigation up into entry collections where it makes sense. That said, for complex mega menus and deeply nested navigation, a single, hierarchical would still be beneficial for editors to understand structure, ordering, and layout context etc. as I already mentioned.

For me the performance issue with nested lists remains a blocker in this scenario.
However since this is probably not a common scenario I understand why this is not a top prio issue...

[kyoshino]

Thanks for providing your configuration. How many items do you have in each level (or how many number of lines in the JSON file)?

I have added items there and the JSON file is now 2k+ lines. I can see a lag while expanding items but a few seconds.

I can see some typing lag as well. I believe it’s not due to nesting but a number of fields because Sveltia CMS’s internal data is flat, so it’s different from the original Netlify CMS issue (we don’t use any part of their code).

[herpster]

Yes between 2 - 3k lines max.

So what you're suggesting is nested list widgets aren’t slow by themselves, but they create a large number of fields, and that’s what causes the admin UI to lag?

Given that field count is the limiting factor, what modeling approach would you recommend for large multi-level menus in Sveltia CMS?

[kyoshino]

I mean, even if a list is not nested deeply, hundreds of fields may cause performance issues in the current Sveltia CMS setup. I'll try to solve the problem before the 1.0 release.