CtrlK
CommunityDocumentationLog inGet started
Tessl Logo

tessl/npm-react-top-loading-bar

A highly customizable React top-loading bar component with hook-based, ref-based, and state-based control patterns.

Agent Success

Agent success rate when using this tile

64%

Improvement

Agent success rate improvement when using this tile compared to baseline

1.25x

Baseline

Agent success rate without this tile

51%

Overview
Eval results
Files

rubric.jsonevals/scenario-10/

{
  "context": "This criteria evaluates how well the engineer uses react-top-loading-bar's ref-based control pattern to programmatically manage loading progress through imperative method calls. The focus is on proper ref usage and calling the appropriate methods (staticStart, increase, complete) to control the loading bar.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "LoadingBar Component",
      "description": "Imports and renders the LoadingBar component from react-top-loading-bar in the component tree",
      "max_score": 15
    },
    {
      "name": "Ref Creation",
      "description": "Creates a ref using useRef() or createRef() to hold a reference to the LoadingBar component",
      "max_score": 15
    },
    {
      "name": "Ref Attachment",
      "description": "Passes the ref to the LoadingBar component using the ref prop",
      "max_score": 15
    },
    {
      "name": "Progress Initialization",
      "description": "Uses staticStart(30) method or equivalent (start() followed by manual setting) to set the initial progress to 30%",
      "max_score": 20
    },
    {
      "name": "Progress Increment",
      "description": "Uses increase() method to incrementally advance progress from 30% to 80% during the upload stage",
      "max_score": 20
    },
    {
      "name": "complete Method",
      "description": "Calls the complete() method on the ref to finish the loading bar at 100% when upload completes",
      "max_score": 15
    }
  ]
}
tessl i tessl/npm-react-top-loading-bar@3.0.0

tile.json