{
  "context": "This criteria evaluates how well the engineer uses the react-top-loading-bar package to implement a loading indicator component, focusing on proper component integration, ref-based or state-based control methods, and customization through package props.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "LoadingBar import",
      "description": "Correctly imports the LoadingBar component from react-top-loading-bar package",
      "max_score": 10
    },
    {
      "name": "LoadingBar rendering",
      "description": "Renders the LoadingBar component in the JSX, ensuring it's included in the component tree",
      "max_score": 15
    },
    {
      "name": "Control method implementation",
      "description": "Uses either ref-based control (with useRef and LoadingBarRef type) or state-based control (with progress prop) to control the loading bar",
      "max_score": 25
    },
    {
      "name": "Start method usage",
      "description": "Properly calls the start() method (ref-based) or sets progress to initiate loading (state-based) when the button is clicked",
      "max_score": 15
    },
    {
      "name": "Complete method usage",
      "description": "Properly calls the complete() method (ref-based) or sets progress to 100 (state-based) to finish the loading animation after 3 seconds",
      "max_score": 15
    },
    {
      "name": "Color customization",
      "description": "Passes the color prop from PageLoaderProps to the LoadingBar's color prop to customize the bar color",
      "max_score": 10
    },
    {
      "name": "Height customization",
      "description": "Passes the height prop from PageLoaderProps to the LoadingBar's height prop to customize the bar height",
      "max_score": 10
    }
  ]
}