increase time for "copied" animation duration

[c2tz]

I changed the duration of the copied animation displayed on the copy code button from 500ms to 2.5 sec because I found it too short and it was losing some of its appeal, which is to display that the code has been copied (on github you can see that the copy code button lasts longer).

[netlify]

✅ Deploy Preview for hugo-hextra ready!

Name	Link
🔨 Latest commit	c14d8de
🔍 Latest deploy log	https://app.netlify.com/sites/hugo-hextra/deploys/655be82a0bbf910008a148f1
😎 Deploy Preview	https://deploy-preview-214--hugo-hextra.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[c2tz]

I would also have liked to remove the blur from the button because I saw a small defect when the copy code button appeared (vis a vis the text that passed through the button during the transition). in short, when I wanted to remove the blur I realized that the opacity was too low. and when I found the color that was responsible for this low opacity I didn't know how to modify or add a new color with tailwind.

[imfing]

2.5 secs sounds too long.
do you know how long is it regarding the copy code button on GitHub?

[c2tz]

2 sec I think I cut out a little early and I couldn't analyze the code because I was on the phone but here's about it:

screen-20231119-011111.2.mp4

[c2tz]

After that, it's up to you, but I think you need at least 1 sec or 1.5 to see if the code has been copied and you didn't see if you pressed the button or if you were distracted.

[c2tz]

On the website it's two seconds (I used a stopwatch and couldn't find any value in the 3 clipboard files indicating a timeout).

[imfing]

Thanks for looking into those detials.
It looks 2.5 seconds is too long for the copy button to restore its copyable state.
If you click it in the PR deployment, move the mouse out and back in, it's still showing a check mark which may be confused to users. Either we can add extra script to change this behavior, or we simply increase the timeout to one second if the duration of the animation is your main concern.

[c2tz]

In fact, what I was thinking of doing was to leave the button active even if it hid a bit of code (it's the case on GitHub, the button remains active) but then I'd have to remove the blur because it's not very aesthetic when you overflow-x scroll, so I'd have to use a background-color.

Something I didn't manage to do. After that, the easiest thing is to increase the value to 1000 as you say. To sum up, the only thing I don't like about this animation is that you barely have time to see it, so it doesn't have enough impact for the user.

Personally, I don't find it confusing because if the copy logo is active = copy not active/not made and if the copy logo is with the checkmark = copy in progress.

[imfing]

@c2tz thanks for the update!