Fetching 5 random products appears to present many repeats

[CloCkWeRX]

I feel like this is a combination of:

• Selects from API use only a "first page" of results or similar
• Asynchronous writes are slower than the subsequent calls to the API; so results are double presented
• The API call/writes appear to be causing moderate load - doing a few batches of answers can result in ~30 loading time. Unclear if its just this app or other overnight processes happening.

Edit;

• https://robotoff.openfoodfacts.org/api/v1/questions/random?country=en:united-states&lang=en&count=5&insight_types=category x multiple requests appears to be correctly generating multiple random resultsets; and nothing looks wrong with the backend queries
• I often see the currently loaded product "swap" with no input from me. Perhaps the local datastore (browser side) is not correctly recording state and re-displaying certain questions.

[CloCkWeRX]

I think this might be the offending approach:

  const edit = annotation => {
    axios.post(
      'https://robotoff.openfoodfacts.org/api/v1/insights/annotate',
      new URLSearchParams(
        `insight_id=${
          questions[0].insight_id
        }&annotation=${annotation}&update=1`,
      ),
    ); // The status of the response is not displayed so no need to wait the response
    setQuestions(questions.filter((_, i) => i)); // remove first question
  };

If multiple annotation requests (A, B) are sent off before the annotation request has posted, but request B finishes before request A; we end up with something like:

setQuestions([a, b, c] - b);
setQuestions([a, b, c] - a); // Question B magically reappears in the collection.

I think simply updating the array of questions before we even do the post request might make this much less of an issue; particularly if we're not fussed about the request success or failure.