TiddlyWiki / TiddlyWiki5

A self-contained JavaScript wiki for the browser, Node.js, AWS Lambda etc.
https://tiddlywiki.com/
Other
8.04k stars 1.19k forks source link

[BUG] Adding/Removing fields is slow without a popup. WHY?? #8025

Closed flibbles closed 8 months ago

flibbles commented 8 months ago

Describe the bug

When adding or removing a field using a button in the editTemplate, it pays to have a popup accompany the change, otherwise it take about half a second to go through.

This hasn't been a problem for the "Add field" button in the EditTemplate, because it always focuses the "Add Field" input-text afterward, which causes a popup, but without that popup, it's slow as heck.

Why??? Does anyone know? This is causing slow behavior with one of my plugins. I'd hate to need a popup just so it's fast.

Expected behavior

No response

To Reproduce

Put the following code into a tiddler, go to the preview while still in edit mode, and then click the buttons rapidly. The "Fast Add" works fast, because it focuses a popup. The "Slow Add" has no popup. It's doing less, but it takes longer.

<fieldmangler>

<% if [all[current]!has:field[test]] %>
    <$button>

        Fast Add
        <$action-sendmessage $message=tm-add-field $param=test />
        <$action-sendmessage $message=tm-focus-selector $param='.my-target'/>
    </$button>
    <br>
    <$button>

        Slow Add
        <$action-sendmessage $message=tm-add-field $param=test />
    </$button>
<% else %>
    <$button message=tm-remove-field param=test>

        Fast Remove
    </$button>
    <br>
    <$button message=tm-remove-field param=test>

        Slow Remove
    </$button>
<% endif %>

<br>

<$edit-text
    field=test
    focusPopup=state
    class="tc-popup-handle my-target"/>

<$reveal state=state type=nomatch text="" default="">
    <div class="tc-block-dropdown">
        This is a popup.

Screenshots

No response

TiddlyWiki Configuration

TiddlyWiki v5.3.3 Firefox

Additional context

No response

flibbles commented 8 months ago

I've worked at this a little. It seems like it's the creation and deletion of the state tiddlers concerning the popup that are speeding it up. If I had a dummy <$action-createtiddler title="$:/state/blah" /> into the slow buttons, they speed up.

Still not sure why.

pmario commented 8 months ago

It's this setting: https://tiddlywiki.com/#Hidden%20Setting%3A%20Typing%20Refresh%20Delay, which defines the draft tiddler refresh delay.

If you set it lower, the preview refresh will be faster.

flibbles commented 8 months ago

I see. I can see the value of such a thing when it comes to typing. For making EditTemplate buttons responsive though, obviously responsiveness is preferred. Is there a preferred way to skip the delay other than writing to a dummy state tiddler like I'm doing? Changing the refresh delay isn't going to work for a plugin that's supposed to work in whatever environment the end-user is using.

Otherwise, thank you. I'll close this issue since it seems not to be an actual bug.

pmario commented 8 months ago

Just as an info. The code is here:

https://github.com/Jermolene/TiddlyWiki5/blob/070327cb5708cfad104e2f325115203b499af631/core/modules/startup/render.js#L87-L108

It explains, why changing any other tiddler at the same time with the draft tiddler disables the "deferredChanges" handling. So since your code also changes the state tiddler of the dropdown it is executed immediately.

So a workaround should be possible by changing "any" $:/temp/* tiddler. Not perfect?!

flibbles commented 8 months ago

Thanks for this. Pity there isn't an easier way for developers to learn about this. My plugins are snappy now though.