[IMPLEMENTED] Squidex - UI Form Delay

[Sudharsan]

I have…

• [x] Read the following guideline: https://docs.squidex.io/01-getting-started/installation/troubleshooting-and-support. I understand that my support request might get deleted if I do not follow the guideline.

I’m submitting a…

• [ ] Regression (a behavior that stopped working in a new release)
• [ ] Bug report
• [x] Performance issue
• [ ] Documentation issue or request

Current behavior

We parse PDF documents and the parsed contents gets stored in Squidex. The PDF is broken into passages and we’ve below schema to store it.

In this schema, “Name” and “Detail” field gets populated with the PDF content and editors will review these fields and type in values in “Comments” and “Keywords” fields. Both the “Comments” and “Keywords” are configured with “Input” editor.

Of late, when we type value in these fields, there is considerable delay for it to appear in the UI form. User has to wait for at least 30 secs or so to see the content they typed to appear in the UI form.

This seems to be an issue when the underlying PDF document size is in MBs. The larger the file, more the number of elements in the Sections array.

Expected behavior

User typed content should appear in the UI as and when they type it. There shouldn’t be any delay.

Minimal reproduction of the problem

Not sure of the exact step. But something like below should help in replicating.
Create a schema as mentioned with array as field type and populate it with 1000 items.

Environment

• [x] Self hosted with docker (Kubernetes)
• [ ] Self hosted with IIS
• [ ] Self hosted with other version
• [ ] Cloud version

Version: [5.5.0.0]

Browser:

• [x] Chrome (desktop)
• [ ] Chrome (Android)
• [ ] Chrome (iOS)
• [ ] Firefox
• [ ] Safari (desktop)
• [ ] Safari (iOS)
• [ ] IE
• [ ] Edge

Others:

[Sebastian]

Hi,

can you provide me a backup or something like that that helps me to reproduce it?

[Sudharsan]

I’ve exported the back up but unable to attach it here since .zip extension is not allowed. Any other way to share the backup ?

[Sebastian]

Upload it to drive or so and send me the link as PM

[Sudharsan]

I’ve sent a message with link.

[Sebastian]

Thank you, I will have a look. There is a chance, that it is not fixable, because the angular forms system is really slow.

[Sebastian]

Right now, I don’t see what I can do. The problem is mainly the layout phase in chrome:

It is interesting that not so many nodes actually need a new layout:

But the DOM is just too big.

[Sebastian]

I would write a custom editor and a grid framework that supports virtual scrolling.

[Sudharsan]

A custom editor for the entire content ? Or, for fields within “Section” array ?
I’m not sure I understand what needs to be done here. Can you elaborate , please ?

[Sebastian]

Only for the section array:

https://docs.squidex.io/02-documentation/developer-guides/editors

I am also going to test a virtual scroll component for the array editor.

[Sebastian]

I have found a solution with virtual scroll.

[Sudharsan]

Great !! Can you please share ?

[Sebastian]

Sure, there is a PR in the CI pipeline. When it is done I can give you the docker tag.

[Sebastian]

The build is still running, but once complete the tag is dev-6146

Squidex/squidex

When you have more than 50 items in a array-item drag and drop will be disabled and virtual scrolling enabled.

[Sudharsan]

Thank you, Sebastian. I will give it a try and let you know.

[Sudharsan]

Hi Sebastian,
I pulled down the latest tag, dev-6134, but still the issue exists. I’m still seeing the same delay while typing. This time around, Squidex is hosted on my local machine using docker-compose for testing. Below is the content of docker-compose.yml file. Can you take a look ?

version: '2.3'
services:
  squidex_mongo:
    image: mongo:4.4.1
    volumes:
      - /etc/squidex/mongo/db:/data/db
    networks:
      - internal
    restart: unless-stopped

  squidex_squidex:
    image: "squidex/squidex:dev-6134"
    environment:
      - URLS__BASEURL=https://${SQUIDEX_DOMAIN}/
      - EVENTSTORE__TYPE=MongoDB
      - EVENTSTORE__MONGODB__CONFIGURATION=mongodb://squidex_mongo
      - STORE__MONGODB__CONFIGURATION=mongodb://squidex_mongo
      - IDENTITY__ADMINEMAIL=${SQUIDEX_ADMINEMAIL}
      - IDENTITY__ADMINPASSWORD=${SQUIDEX_ADMINPASSWORD}
      - IDENTITY__GOOGLECLIENT=${SQUIDEX_GOOGLECLIENT}
      - IDENTITY__GOOGLESECRET=${SQUIDEX_GOOGLESECRET}
      - IDENTITY__GITHUBCLIENT=${SQUIDEX_GITHUBCLIENT}
      - IDENTITY__GITHUBSECRET=${SQUIDEX_GITHUBSECRET}
      - IDENTITY__MICROSOFTCLIENT=${SQUIDEX_MICROSOFTCLIENT}
      - IDENTITY__MICROSOFTSECRET=${SQUIDEX_MICROSOFTSECRET}
      - ASPNETCORE_URLS=http://+:5000
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:5000/healthz"]
      start_period: 60s
    depends_on:
      - squidex_mongo
    volumes:
      - /etc/squidex/assets:/app/Assets
    networks:
      - internal
    restart: unless-stopped

  squidex_proxy:
    image: squidex/caddy-proxy
    ports:
      - "8081:80"
      - "443:443"
    environment:
      - SITE_ADDRESS=${SQUIDEX_DOMAIN}
      - SITE_SERVER="squidex_squidex:5000"
    volumes:
      - /etc/squidex/caddy/data:/data
      - /etc/squidex/caddy/config:/config
    depends_on:
      - squidex_squidex
    networks:
      - internal
    restart: unless-stopped
    
networks:
  internal:
    driver: bridge

[Sudharsan]

My bad. I see that you’ve mentioned dev-6146 as the tag. Let me try that and get back to you.

[Sudharsan]

@Sebastian - I pulled down the tag dev-6146 and I no longer see any delay in the UI form while typing. Everything works as expected. When will this change be part of the master branch ?

Thanks a lot for quick turn around, as always.

[Sebastian]

It is part of the master branch.