fix: improved lg editor performance

[a-b-r-o-w-n]

Description

I'm not entirely sure why the update lg template code path is slow, or why it is blocking, but it is causing the editor and flow to have a delay when typing quickly. Adding a throttle to all lg api methods solves this by circumventing the IO for intermediate keystrokes.

Task Item

fixes #2627

[zhixzhan]

Hi @a-b-r-o-w-n ，I believe the blocking comes from the sync method imported by @lei9444 to resolve a bug "form won't update when shell data update".

BotFramework-Composer/Composer/packages/ui-plugins/lg/src/LgField.tsx

Line 75 in c0d6997

sync(template.body, localValue);

lgField here maintains a real-time synced data from shell, it caused a editor re-render.

Compares to this, all up view maintains a local state at initial load, never meet the performance issue. I prefer also keep a local state value here.

[a-b-r-o-w-n]

That was our thought as well but the editor doesn’t use the shell data to render after the initial render (it’s an uncontrolled component). But there is enough blocking IO to back up the event loop and prevents the browser from repainting.

I do think there could be some work to further decouple the persistent layer from the store, but our initial investigation didn’t point to any smoking guns.

[a-b-r-o-w-n]

@zhixzhan re-reading your comment after coffee I see what you are saying now. I'll look at that sync method to see if that is the issue.