leonsilicon/inquirer-press-to-continue

Flickering Output

deviljin112 opened this issue · 4 comments

Strange flickering effect occurs while the message appears.
Not sure what the cause of it is.
Tested on few terminal emulators.
Does not happen with ora when used directly.

Tabby_gJa9srugsp

Node: 16.15.0
NPM: 8.5.5
OS: WSL2 Ubuntu 22.04

I have this issue as well on Alacritty, but I'm honestly not sure what is causing it. For me, it works smoothly on Hyper (https://hyper.is). I'll look into it and see if I can figure out how to fix it.

I've made a small tweak that seems to greatly reduce the flickering (See linked commit above). This probably isn't the ideal / cleanest solution but maybe this gives you an idea or suggestion on how to fix the issue.

I hope that helps.

Thanks for your example code! I browsed through the inquirer source code and found a function called renderWithSpinner (which wasn't in the TypeScript types for some reason), and when I used that function without creating my own ora spinner, it would still flicker on my terminal. Thus, I think your solution where I don't use the inquirer API at all to render content on the screen and instead manually render a custom Ora spinner to stdout looks like the only way I can fix this issue.

I've released a new version 1.1.4 which mostly fixes the flickering issue; the only flickering issue I have right now is when the user presses enter on a press-to-continue prompt that requires a different key (it has to do with me manually clearing the extra line/ora artifact created when the user presses enter). I'm not sure how to avoid that issue, so let me know if you can think of anything!

Awesome, thanks for taking the time to include it in the release so quickly :)

I will play around with it over the weekend and come back to you / tag my commit on the fork if I come up with something decent. Just FYI, I'm more JS than TS so you might have to refactor some of it afterwards. 🤣