netlify[bot]
commented
12 months ago Deploy Preview for ask-quiz ready!
| Name | Link |
|---|---|
| Latest commit | 34cc2e65cc44e8f4ba8c9791b60a524fc2ebca1f |
| Latest deploy log | https://app.netlify.com/sites/ask-quiz/deploys/6521642d48989c000867ce50 |
| Deploy Preview | https://deploy-preview-8--ask-quiz.netlify.app/ |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site configuration.
imhardikdesai
Error Handling:
We added a new state variable error using useState to handle errors that may occur during the API request for fetching questions. Inside the handleSubmit function, we wrapped the API request in a try-catch block to catch any potential errors. If an error occurs during the API request, we set the error state with an error message to inform the user. We added a conditional rendering block to display the error message in red if error is not null. Feedback for Loading:
We provided feedback to the user during the loading process by using the HashLoader component from 'react-spinners' to display a loading spinner. The loading spinner is displayed in the center of the screen while questions are being fetched. The loading state is controlled by the loading state variable from the context. Improved Styling and Layout:
We made minor styling improvements, such as centering text and the loading spinner on the screen. We used Chakra UI's Text component to style and display the error message in red if there is an error. User-Friendly Error Message:
In the error message, we provide a user-friendly error message, such as "Failed to fetch questions. Please try again," to inform the user about the issue. These changes enhance the user experience by providing better feedback during loading and handling errors gracefully when fetching questions from the API.