Debounce idea inputs #350
Merged
Debounce idea inputs #350
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Ideally these changes should be applied more globally but until
we get there - this is a nice little upgrade and saves the
server quite some unnecessary pain.
Chose the debounce interval of 300ms as it's apparently the
default in phoenix (later versions/other setup):
<details>
<summary>Before</summary>
(small excerpt)
```
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an updat", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 239µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 268µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update?", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 298µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? ", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 327µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? W", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 387µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 259µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We ", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 261µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We s", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 322µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We sh", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 273µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We sho", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 268µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We shou", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 210µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We shoul", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 279µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We should", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 258µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We should ", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 234µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We should d", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 255µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We should de", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 302µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We should deb", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 233µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We should debo", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 283µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We should debou", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 278µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We should deboun", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 259µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We should debound", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 253µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We should deboun", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 358µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We should debounc", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 215µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We should debounce", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 319µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We should debounce/", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 297µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We should debounce/e", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 237µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We should debounce/et", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 235µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We should debounce/etc", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 288µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "aEJFaToOESoSESY5KSM7NigyfSFYACwqZ3wP_vFhQSoLXHnlJEEF1eEP", "_target" => ["idea", "body"], "idea" => %{"body" => "Does every key stroke really need to trigger an update? We should debounce/etc.", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 300µs
```
</details>
<details>
<summary>After</summary>
(in full)
```
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "ARNwSj0sHSEnJzskIBkCajszXCgQMjAY3bBsXTJcderQQrW0YDdOyWYb", "_target" => ["idea", "body"], "idea" => %{"body" => "Now I ", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 262µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "ARNwSj0sHSEnJzskIBkCajszXCgQMjAY3bBsXTJcderQQrW0YDdOyWYb", "_target" => ["idea", "body"], "idea" => %{"body" => "Now I can finally tyu", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 209µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "ARNwSj0sHSEnJzskIBkCajszXCgQMjAY3bBsXTJcderQQrW0YDdOyWYb", "_target" => ["idea", "body"], "idea" => %{"body" => "Now I can finally ty", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 241µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "ARNwSj0sHSEnJzskIBkCajszXCgQMjAY3bBsXTJcderQQrW0YDdOyWYb", "_target" => ["idea", "body"], "idea" => %{"body" => "Now I can finally type in peve ", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 256µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "ARNwSj0sHSEnJzskIBkCajszXCgQMjAY3bBsXTJcderQQrW0YDdOyWYb", "_target" => ["idea", "body"], "idea" => %{"body" => "Now I can finally type in pea", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 296µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "ARNwSj0sHSEnJzskIBkCajszXCgQMjAY3bBsXTJcderQQrW0YDdOyWYb", "_target" => ["idea", "body"], "idea" => %{"body" => "Now I can finally type in peace over here", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
[debug] Replied in 275µs
[debug] HANDLE EVENT "validate" in MindwendelWeb.BrainstormingLive.Show
Component: MindwendelWeb.IdeaLive.FormComponent
Parameters: %{"_csrf_token" => "ARNwSj0sHSEnJzskIBkCajszXCgQMjAY3bBsXTJcderQQrW0YDdOyWYb", "_target" => ["idea", "body"], "idea" => %{"body" => "Now I can finally type in peace over here!", "brainstorming_id" => "83e5c67e-800e-40ca-86be-8fd02a15289e", "id" => "", "username" => "Tobi"}}
```
</details>
Docs (newest version, but works): https://hexdocs.pm/phoenix_live_view/bindings.html#rate-limiting-events-with-debounce-and-throttle
|
cool thanks, I noticed all the spamming updates myself last time 👍 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Ideally these changes should be applied more globally but until we get there - this is a nice little upgrade and saves the server quite some unnecessary pain.
Chose the debounce interval of 300ms as it's apparently the default in phoenix (later versions/other setup):
Before
(small excerpt)
After
(in full)
Docs (newest version, but works): https://hexdocs.pm/phoenix_live_view/bindings.html#rate-limiting-events-with-debounce-and-throttle