Exercise 3.1: Delay doesn't work as expected with opacity transition

[Federico Babrauskas]

In the first extra credit of exercise 3 about useTransition, the related video demonstrates that if you set delay = 200 inside createPokemonResource, the opacity won't be shown because the pokemon-loading class has transition-delay: 0.4s;.

That's entirely true unless you have set a Request min time and/or Request variable time inside your DevTools. The default value of these variables is 400 and if you don't set them to 0, you'll end up with a delay greater than 0.4s.

Following the function from @kentcdodds/react-workshop-app/server:

function getDefaultDelay() {
  const variableTime = ls(getKey('variable_request_time'), 400);
  const minTime = ls(getKey('min_request_time'), 400);
  return Math.random() * variableTime + minTime;
}

If you have the default request time values of 400, you'll have at least more than 400ms of delay. If you sum the custom delay added in createPokemonResource, you'll have 600ms or more.

I think this should be clarified in the exercise explanation because it can easily lead to confusion.

[Kent C. Dodds]

That's a good point! Would you mind making a note in the instructions?

[Federico Babrauskas]

Sure, I'll make a PR with the note in the instructions 😄