Modified the Knobs onChange debounce function so that knob storage occurs on keypress but rendering waits until debouncing has completed

[CodeByAlex]

Issue: #6005

What I did

Modified the component force render debounce so that knob storage still occurs on keypress but the force rendering is debounced. In the 5.0.1 version, the debouncing rate is 150ms which is a little faster than the average typing speed. The change in this PR sets the debouncing rate at 325ms so that the component renders when the user has completed their thought. Frameworks render at different speeds and waiting longer reduces glitchiness. I tested this change in the CLI project to ensure that characters were not being removed as seen in Vue projects.

*I chose 325ms because I felt that it was long enough to reduce glitchiness but not too long to cause frustration. If people believe that this time is too long or too short, please comment below so that we can resolve before merging this in.

How to test

• Is this testable with Jest or Chromatic screenshots? No
• Does this need a new example in the kitchen sink apps? No
• Does this need an update to the documentation? No

If your answer is yes to any of these, please make sure to include it in your PR.

@shilman @kristremblay @kylepeeler

[codecov]

Codecov Report

Merging #6022 into next will decrease coverage by 0.94%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##             next    #6022      +/-   ##
==========================================
- Coverage   34.92%   33.98%   -0.95%     
==========================================
  Files         648      651       +3     
  Lines        9517     9478      -39     
  Branches     1352     1345       -7     
==========================================
- Hits         3324     3221     -103     
- Misses       5576     5642      +66     
+ Partials      617      615       -2

Impacted Files	Coverage Δ
addons/knobs/src/registerKnobs.js	0% <0%> (ø)	⬆️
lib/theming/src/themes/dark.ts	0% <0%> (-100%)	⬇️
addons/notes/src/shared.ts	0% <0%> (-100%)	⬇️
lib/theming/src/animation.ts	0% <0%> (-100%)	⬇️
lib/theming/src/utils.ts	0% <0%> (-100%)	⬇️
lib/theming/src/themes/light.ts	0% <0%> (-100%)	⬇️
lib/theming/src/modules/syntax.ts	0% <0%> (-100%)	⬇️
lib/theming/src/base.ts	0% <0%> (-100%)	⬇️
lib/theming/src/create.ts	0% <0%> (-89.59%)	⬇️
lib/ui/src/libs/merge.js	36.36% <0%> (-45.46%)	⬇️
... and 67 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3f94f5b...48788f6. Read the comment docs.

[shilman]

LGTM!

[kristremblay]

@shilman When upgrading to the most recent commit, I get the following error when clicking on the Knobs tab:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    in Unknown (created by Context.Consumer)
    in Styled(Component) (created by KnobPanel)
    in KnobPanel
    in div (created by Context.Consumer)
    in Styled(div)
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown
    in Unknown
    in Unknown (created by Context.Consumer)
    in _default (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout) (created by ResizeDetector)
    in ResizeDetector
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by ResizeDetector)
    in ResizeDetector
    in Unknown
    in Unknown (created by Manager)
    in ThemeProvider (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

[kristremblay]

For now the only version working correctly for me is 5.0.0.

[CodeByAlex]

@kristremblay, when you say latest commit, do you mean the most recent published next version - 5.1.0-alpha.4?

[kristremblay]

@CodeByAlex Sorry, yes,.

After installing 5.1.0-alpha.4 it breaks when clicking the Knobs tab.

[CodeByAlex]

No worries @kristremblay. Thanks for your feedback:) This pr hasn’t been published yet even though it has been merged into the next branch. If you are seeing new errors popping up when upgrading to alpha.4, I would suggest that you open a new issue with your finding. This PR will be published soon and should help with the original issue you brought up.

[kristremblay]

Thanks, @CodeByAlex , for the time being I'll probably just stick with 5.0.0 and upgrade later :)

[FrankiePo]

Can we add global configuration for debounce time?