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-4/

{
  "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.0

tile.json