Fix/ Optimize and Add Loading Indicator for Auto-Scroller in Reading

[ghassenbenzahra123]

📝 Summary

This PR fixes: #1466

Description

This PR addresses the issue of overlapping pages during auto-scroll in Quran reading mode by implementing a more strict approach to page layout and scaling. Key improvements include:

1. Fixed page dimensions using SizedBox with screen height/width
2. Added proper content clipping and overflow handling
3. Implemented precise scaling controls with Transform.scale
4. Added white background and proper borders to prevent bleeding
5. Optimized page transitions and scroll behavior

The changes ensure each page takes exactly one screen height without overlapping the next/previous pages while maintaining proper scaling of the Quran text.

Tests

🧪 Use case 1

💬 Description:

1. Open Quran reading mode
2. Enable auto-scroll feature
3. Verify pages scroll smoothly without overlapping
4. Check that text scaling works correctly
5. Ensure pages remain properly aligned during scroll
6. Test pause/resume functionality

📷 Screenshots or GIFs (if applicable):
[Screenshots showing smooth page transitions without overlap]

🧪 Use case 2

💬 Description:

1. Test different screen sizes
2. Verify scaling remains consistent
3. Check performance with long reading sessions
4. Ensure no memory leaks from page caching

Checklist:

• Coding Standards: I have reviewed my code to ensure it follows the project's coding standards.
• Testing: I have tested the changes and they work as expected.
• Merge Conflicts: I have resolved any merge conflicts with the latest main/development branch.
• Branch Status: The branch is up-to-date with the target branch (main/development).