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 increase() method and related APIs to implement a multi-step upload progress tracker with incremental progress updates.",
"type": "weighted_checklist",
"checklist": [
{
"name": "LoadingBar component imported",
"description": "Imports the LoadingBar component from react-top-loading-bar package",
"max_score": 10
},
{
"name": "LoadingBar component rendered",
"description": "Renders the LoadingBar component in the JSX with appropriate placement in the component tree",
"max_score": 10
},
{
"name": "Ref creation",
"description": "Creates a ref using useRef to access the LoadingBar's imperative methods",
"max_score": 10
},
{
"name": "Ref attached correctly",
"description": "Attaches the created ref to the LoadingBar component using the ref prop",
"max_score": 10
},
{
"name": "increase() method usage",
"description": "Uses the increase() method (via ref) to increment progress by 25 at each stage",
"max_score": 30
},
{
"name": "Multiple increase() calls",
"description": "Calls increase() multiple times (4 times total) to advance through all upload stages",
"max_score": 15
},
{
"name": "complete() method usage",
"description": "Uses the complete() method to finish the loading bar and trigger fade-out after reaching 100%",
"max_score": 10
},
{
"name": "Progress tracking",
"description": "Uses getProgress() method or maintains state to display current progress percentage",
"max_score": 5
}
]
}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