Animate priority badge when priority changes ✨
Maintainers usually reply within 2 days
Nobody has claimed this yet.
Assessment
- Difficulty
- 1/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 82/100
- Issue type
- Feature
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- javascript, react, tailwindcss
- Domain
- frontend
Research direction
Start in client/src/components/Board/TaskCard.jsx, at the span that renders task.priority and its class string. The issue gives a useState/useRef/useEffect snippet to add to the same component, and that snippet is the starting point rather than a finished fix. Done means the badge scales and shows a ring for about 600ms when task.priority changes, and does not flash on first render. Check the behaviour by changing a task's priority in the running board.
Written by the indexing model from the issue text.
Description
Animate priority badge when priority changes ✨
File: client/src/components/Board/TaskCard.jsx
Priority badge just instantly changes 💀
No visual feedback when it updates fr!!
Fix:
const [flash, setFlash] = useState(false)
const prevPriority = useRef(task.priority)
useEffect(() => {
if (prevPriority.current !== task.priority) {
setFlash(true)
setTimeout(() => setFlash(false), 600)
prevPriority.current = task.priority
}
}, [task.priority])
<span className={text-[10px] px-1.5 py-0.5 rounded font-medium transition-all ${PRIORITY_COLORS[task.priority]} ${flash ? 'scale-125 ring-2 ring-white/30' : 'scale-100'}}>
{task.priority}
~10 lines! No backend needed 🎯
Feels super polished!! ✨
- Dominant language
- JavaScript
- Stars
- 39
- Forks
- 105
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 31
Getting set up
- No Dockerfile or Docker Compose file
- No pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from anoopcodehack/DevBoard
-
good first issue
Difficulty 1/5 1-3 hours Newbie friendliness 88/100
anoopcodehack/DevBoard#616 ·
Maintainers usually reply within 2 days
-
Add smooth horizontal scroll on board 🖱️Possibly taken @Rahul-pamula claimed this today. Opengood first issue
Difficulty 1/5 1-3 hours Newbie friendliness 85/100
anoopcodehack/DevBoard#615 · 1 comment ·
Maintainers usually reply within 2 days
-
good first issue
Difficulty 1/5 1-3 hours Newbie friendliness 90/100
anoopcodehack/DevBoard#614 ·
Maintainers usually reply within 2 days
-
good first issue
Difficulty 1/5 Under an hour Newbie friendliness 95/100
anoopcodehack/DevBoard#613 ·
Maintainers usually reply within 2 days
-
good first issue
Difficulty 1/5 Under an hour Newbie friendliness 85/100
anoopcodehack/DevBoard#612 ·
Maintainers usually reply within 2 days
All issues in anoopcodehack/DevBoard
Similar issues
-
ACK_WAITING HELP_WANTED UPDATE_CS
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
OWASP/CheatSheetSeries#2781 ·
Maintainers usually reply within 1 day
-
Hermes: /ponytail off never reaches the model, the ruleset stays activePossibly taken @szsunyuan claimed this today. Open
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
DietrichGebert/ponytail#1121 ·
Maintainers usually reply within 3 days
-
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
Maintainers usually reply within 1 day
-
integrations plugin
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
mem0ai/mem0#7622 · 1 comment ·
Maintainers usually reply within 1 day
-
bug package:vitest
Difficulty 2/5 1-3 hours Newbie friendliness 83/100
cloudflare/workers-sdk#16238 · 1 comment ·
Maintainers usually reply within 1 day