Solve instant auto refresh issue while editing page code

I usually work with the page in split mode in order to quickly edit the html-code directly if needed.

At the moment there is a serious inconvenience when editing the page code directly. At least with NodeJS.
After each change of any letter in the code, the page in preview updates immediately.

It causes two consequences:

  1. Code editor “freezes” for a moment. So basically there is a lag that appears between the moment I press a key on the keyboard and the moment I see it on screen. It’s like I play a brand new videogame on the old laptop with low FPS.
  2. Page blinking (which is especially noticeable on pages with not white background)

Both of those are very annoying. :slight_smile:

I’ve recorded a little video with a demonstration.

It is hard to see the first issue in it, but maybe you can hear that the appearance of letters is little behind the tapping sound.

Perhaps it has something to do with how templates work in NodeJS. Therefore, I don’t know if this can be fixed at all.
If it is not possible, then I would like some kind of solution anyway.

The first proposition is to refresh the page not immediately, but after some inactivity. E.g. after three seconds.

Maybe another option is to give an opportunity to turn off automatic page refresh (by clicking on the special toggle).

I have come across the same issue in both ASP.NET (SPA) and NodeJS (SPA). I also work with pages in split mode and any change in the code freezes the code editor while design/preview is being updated to reflect any change in the code.

1 Like

There was indeed a problem with content pages that it did a full reload on each change made, with the upcoming update this will be improved and it should not reload when you are just editing text content. Without the full reload the freezes should be much less.

1 Like

@patrick , hello! Thank you for the feedback.
The problem is not only with the inner text. That was just a simple example I gave in the demo.
So, you say, beside the inner text, the issue will still remain?

No, it is also for other edits then just the inner text. Most changes will not trigger a reload, there are a few like editing in the header or with specific app connect components that it requires a reload.

Got it! Sounds ok to me. :slight_smile:
But not sure if the total turn off for the auto refresh is going to suit everyone. I guess, we will see.

So, smooth refresh while editing is impossible?
Or could it be implemented later?
Because it still will be easier than manual refresh.

Also, I just realized that the shortcut key for refresh (F5 or Ctrl-R) doesn’t work while focused in the code editor. I understand that a code editor has its own hotkeys.
Is it possible to add the same hotkeys that will affect page preview?

Auto refresh is not turned off. The full page reload on text editing is not needed, so unlike now it won’t reload the whole page and you won’t see such flashing of the content in design view.

Ok, understood

This has been fixed in Wappler 4.4.0

1 Like

This topic was automatically closed after 46 hours. New replies are no longer allowed.