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 evaluation assesses how well the engineer uses react-top-loading-bar's complete() method and related control APIs to implement a file upload progress indicator. The focus is on proper usage of ref-based control, starting the loading bar, and calling complete() to finish the animation.",
"type": "weighted_checklist",
"checklist": [
{
"name": "LoadingBar import",
"description": "Imports the default LoadingBar component from react-top-loading-bar",
"max_score": 10
},
{
"name": "LoadingBarRef type",
"description": "Imports and uses the LoadingBarRef type for the ref object",
"max_score": 10
},
{
"name": "Ref creation",
"description": "Creates a ref using useRef<LoadingBarRef>(null) or React.createRef<LoadingBarRef>()",
"max_score": 10
},
{
"name": "LoadingBar rendering",
"description": "Renders the LoadingBar component with the ref prop attached",
"max_score": 10
},
{
"name": "Color configuration",
"description": "Sets the LoadingBar color prop to 'blue'",
"max_score": 5
},
{
"name": "Height configuration",
"description": "Sets the LoadingBar height prop to 3",
"max_score": 5
},
{
"name": "Start method",
"description": "Calls ref.current?.continuousStart() or ref.current?.start() when file upload begins",
"max_score": 20
},
{
"name": "Complete method",
"description": "Calls ref.current?.complete() when the simulated upload finishes after 3 seconds",
"max_score": 30
}
]
}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