Enhance the Quiz Generation Loader with a More UI-Pleasing Design

[ishaanxgupta]

Description:
Currently, the loader displayed during the quiz generation process is very basic. It is just a white circle with no animation or interactive design. This makes the user experience feel less engaging and outdated.
Improving the loader to a more visually appealing and animated design will enhance the overall user interface and provide a better experience for users while they wait for their quiz to be generated.

Steps to Reproduce:

1. Navigate to the /input page.
2. Enter the required input to generate a quiz.
3. Observe the loader displayed while the quiz is being generated.

Loader.issue.mp4

Expected Behavior:
The loader should:
Be visually appealing and align with the project’s overall design aesthetic.
Include animation to indicate progress or activity, making it more engaging for users.
Provide a sense of continuity and professionalism.

Proposed Solution:
Replace the current static loader with an animated loader.
Use a loader design that matches the project’s theme and colors.
A subtle animation indicating quiz preparation, such as a "Generating" animation with relevant icons.
Consider using lightweight libraries like react-loader-spinner or react-content-loader for prebuilt animated loaders, or create a custom CSS-based loader.

Solved.Loader.issue.mp4

[Karn-x7]

great bro this is goodd