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

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

tile.json