[GH-ISSUE #55] Show intermediate states in the loading bar #33

New Issue

2026-02-15T18:17:07-05:00

yindo commented

2026-02-15 18:17:07 -05:00

Originally created by @rlancemartin on GitHub (Apr 26, 2023).
Original GitHub issue: https://github.com/langchain-ai/auto-evaluator/issues/55

Originally assigned to: @benisgold on GitHub.

How much effort to make the "processing files" stage more granular (e.g., show making retriever, making eval set, etc)? would be slightly better UX b/c this stage does hang for ~20-30 sec (esp if making eval set, etc).

Originally created by @rlancemartin on GitHub (Apr 26, 2023). Original GitHub issue: https://github.com/langchain-ai/auto-evaluator/issues/55 Originally assigned to: @benisgold on GitHub. How much effort to make the "processing files" stage more granular (e.g., show making retriever, making eval set, etc)? would be slightly better UX b/c this stage does hang for ~20-30 sec (esp if making eval set, etc). ![image](https://user-images.githubusercontent.com/122662504/234724214-af98a7e2-eece-406e-96dd-120a98c86e20.png)

yindo closed this issue

2026-02-15 18:17:07 -05:00

yindo commented

2026-02-15 18:17:07 -05:00

@rlancemartin commented on GitHub (Apr 26, 2023):

Initially setResults is empty -

 const submit = handleSubmit(async (data) => {
    setShouldShowProgress(true);
    setLoading(true);
    setResults([]);

Because this is empty, progress bar is set with initialProgress -

  const experimentProgress = useMemo(() => {
    if (results.length === 0) {
      return [initialProgress];
    }

When we get data back, we then update via setResults -

onmessage(ev) {
        try {
          const row: Result = JSON.parse(ev.data)?.data;
          setResults((results) => [...results, row]);

And progress bar is updated -

const experimentProgress = useMemo(() => {
    if (results.length === 0) {
      return [initialProgress];
    }

    const res = 15 + Math.floor((results?.length / evalQuestionsCount) * 85);

    if (res === 100) {
      return [finishedProgress];
    }
    const ret = [
      initialProgress,
      {
        value: res,
        color: "blue",
        label: "Generating Evals & Grading",
      },
    ];
    return ret;
  }, [results, evalQuestionsCount]);

@rlancemartin commented on GitHub (Apr 26, 2023): Initially `setResults` is empty - ``` const submit = handleSubmit(async (data) => { setShouldShowProgress(true); setLoading(true); setResults([]); ``` Because this is empty, progress bar is set with `initialProgress` - ``` const experimentProgress = useMemo(() => { if (results.length === 0) { return [initialProgress]; } ``` When we get data back, we then update via `setResults` - ``` onmessage(ev) { try { const row: Result = JSON.parse(ev.data)?.data; setResults((results) => [...results, row]); ``` And progress bar is updated - ``` const experimentProgress = useMemo(() => { if (results.length === 0) { return [initialProgress]; } const res = 15 + Math.floor((results?.length / evalQuestionsCount) * 85); if (res === 100) { return [finishedProgress]; } const ret = [ initialProgress, { value: res, color: "blue", label: "Generating Evals & Grading", }, ]; return ret; }, [results, evalQuestionsCount]); ```

yindo commented

2026-02-15 18:17:07 -05:00