Animated Preloader added #405
Conversation
WalkthroughThe changes in the Changes
Assessment against linked issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. 😊 |
1 similar comment
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. 😊 |
❌ Deploy Preview for manageyourwaste failed. Why did it fail? →
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Thank you, AbhijitMotekar99, for creating this pull request and contributing to WasteManagement! 💗
The maintainers will review this Pull Request and provide feedback as soon as possible! 😇
We appreciate your patience and contribution, Keep up the great work! 😀
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (2)
index.html (2)
30-30: Simplify the gradient background.The gradient uses the same color three times which is unnecessary.
- background: linear-gradient(to right, #26a69a, #26a69a, #26a69a); /* Yellow gradient */ + background: #26a69a;
90-103: Enhance preloader accessibility.The preloader SVG lacks proper accessibility attributes for screen readers.
- <div class="preloader"> + <div class="preloader" role="status" aria-label="Loading"> <svg viewBox="0 0 1320 300"> + <title>Loading Animation</title> + <desc>Animated text showing 'Waste Management' while content loads</desc> <text x="50%" y="50%" dy=".35em" text-anchor="middle" class="animate-stroke" style="font-weight: bold;" + aria-hidden="true" > Waste Management </text> </svg> </div>
| window.addEventListener('load', function() { | ||
| // Show the preloader for 5 seconds | ||
| setTimeout(function() { | ||
| document.querySelector('.preloader').style.display = 'none'; // Hide preloader | ||
| document.querySelector('.main-content').classList.remove('hidden'); // Show main content | ||
| }, 5000); // 5 seconds delay | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve preloader timing and reliability.
The current implementation has several limitations:
- The 5-second fixed delay might be too long for fast connections or too short for slow ones
- No fallback if JavaScript is disabled
- Doesn't consider the actual content load state
Consider this improved implementation:
window.addEventListener('load', function() {
- // Show the preloader for 5 seconds
+ // Track actual content load state
+ const contentLoaded = new Promise((resolve) => {
+ if (document.readyState === 'complete') {
+ resolve();
+ } else {
+ window.addEventListener('load', resolve);
+ }
+ });
+
+ // Ensure minimum animation time of 2 seconds
+ const minimumDelay = new Promise(resolve => setTimeout(resolve, 2000));
+
+ // Hide preloader only when content is ready and minimum time has passed
+ Promise.all([contentLoaded, minimumDelay]).then(() => {
setTimeout(function() {
document.querySelector('.preloader').style.display = 'none';
document.querySelector('.main-content').classList.remove('hidden');
- }, 5000); // 5 seconds delay
+ }, 0);
+ });
});Also add this fallback in the <head>:
<noscript>
<style>
.preloader { display: none !important; }
.main-content { display: block !important; }
</style>
</noscript>| <div id="progress-container"> | ||
| <div id="progress-bar"></div> | ||
| </div> | ||
| <div class="main-contetnt"> |
There was a problem hiding this comment.
Fix critical typo in main content class name.
There's a typo in the class name that will break the preloader functionality. The JavaScript looks for .main-content but the HTML uses .main-contetnt.
- <div class="main-contetnt">
+ <div class="main-content">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div class="main-contetnt"> | |
| <div class="main-content"> |
| display: block; | ||
| padding: 20px; | ||
| width: 100vw; | ||
| min-height: 100vh; /* Ensure it covers at least the full height */ | ||
| padding: 0; /* Reset any padding */ | ||
| margin: 0; /* Remove margin */ |
There was a problem hiding this comment.
Remove duplicate padding declaration.
The .main-content class has duplicate padding properties.
.main-content {
display: block;
- padding: 20px;
width: 100vw;
min-height: 100vh;
padding: 0;
margin: 0;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| display: block; | |
| padding: 20px; | |
| width: 100vw; | |
| min-height: 100vh; /* Ensure it covers at least the full height */ | |
| padding: 0; /* Reset any padding */ | |
| margin: 0; /* Remove margin */ | |
| display: block; | |
| width: 100vw; | |
| min-height: 100vh; /* Ensure it covers at least the full height */ | |
| padding: 0; /* Reset any padding */ | |
| margin: 0; /* Remove margin */ |
Issues Identification
Closes: #347
Description
Summary
Animeted text preloader added
Waste.Manaegment.preloader.mp4
Types of Changes
Please check the boxes that apply
Checklist
Please check the boxes that apply
Summary by CodeRabbit
New Features
Bug Fixes