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

**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.

https://github.com/user-attachments/assets/449a6167-fd5c-42e3-981a-09845d569786

**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.

https://github.com/user-attachments/assets/b0841a0a-ab2f-48b2-888b-7eecffd6c65d