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%
{
"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.0evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10