Timer in prompt form #70
Merged
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
Closed
maciejkrol18
reviewed
Jan 6, 2025
src/components/prompt-form.tsx
Outdated
Comment on lines
176
to
188
| <TooltipProvider delayDuration={0}> | ||
| <Tooltip> | ||
| <TooltipTrigger> | ||
| <span className="text-sm">Odczekaj: {lockDuration}</span> | ||
| </TooltipTrigger> | ||
| <TooltipContent> | ||
| <span> | ||
| Ograniczenie jest wprowadzone dla zachowania stabliności | ||
| systemu | ||
| </span> | ||
| </TooltipContent> | ||
| </Tooltip> | ||
| </TooltipProvider> |
There was a problem hiding this comment.
suggestion: I think we can get the message through with less text upfront. I would add a clock icon with just the seconds remaining next to it, and provide more information only on hover. I think that this being a timeout countdown should be intuitive to majority of users, and this way it looks nicer imo
Suggested change
| <TooltipProvider delayDuration={0}> | |
| <Tooltip> | |
| <TooltipTrigger> | |
| <span className="text-sm">Odczekaj: {lockDuration}</span> | |
| </TooltipTrigger> | |
| <TooltipContent> | |
| <span> | |
| Ograniczenie jest wprowadzone dla zachowania stabliności | |
| systemu | |
| </span> | |
| </TooltipContent> | |
| </Tooltip> | |
| </TooltipProvider> | |
| <TooltipProvider delayDuration={0}> | |
| <Tooltip> | |
| <TooltipTrigger className="flex items-center gap-x-1 w-12 text-red-500"> | |
| <ClockAlert className="size-4"/> | |
| <span>{lockDuration}</span> | |
| </TooltipTrigger> | |
| <TooltipContent className="text-center"> | |
| <span> | |
| Odczekaj przed wysłaniem kolejnego żądania | |
| <br/> | |
| Ograniczenie jest wprowadzone dla zachowania stabilności systemu | |
| </span> | |
| </TooltipContent> | |
| </Tooltip> | |
| </TooltipProvider> |
Notes: fixed width on TooltipTrigger ensures that there's no slight layout shifts when the numbers change
There was a problem hiding this comment.
Notes: fixed width on TooltipTrigger ensures that there's no slight layout shifts when the numbers change
PRly dose of CSS goes here 😂
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.
lastRequestTimestampvariable to local storage to track when the user sent last request - it's needed to calculate time required to wait for the next requestDatetostringand vice versauseEffectinPromptFormcomponent where I check if timestamp is already in local storage, calculate delta to decide if button should be enabled and update the lock duration in interval - it happens inuseEffectsince we need to have access to browser local storagesetIntervalis not accurate - if you know better solution feel free to share itHow it looks:
