resolve database pipeline freeze by implementing next() callback in user pre-save hook

backend/config/passportConfig.js

@@ -7,7 +7,7 @@ passport.use(
         { usernameField: "email" },
         async (email, password, done) => {
             try {
-                const user = await User.findOne( {email} );
+                const user = await User.findOne( {email} ).select("+password");;
                 if (!user) {
                     return done(null, false, { message: 'Email is invalid '});
                 }
@@ -38,7 +38,10 @@ passport.serializeUser((user, done) => {
 passport.deserializeUser(async (id, done) => {
     try {
         const user = await User.findById(id);
-        done(null, user);
+        if (!user) {
+            return done(null, false);
+        }
+        done(null,user);
     } catch (err) {
         done(err, null);
     }

backend/models/User.js

@@ -19,16 +19,20 @@ const UserSchema = new mongoose.Schema({
 });
 
 // ✅ FIXED: no next()
-UserSchema.pre('save', async function () {
-  if (!this.isModified('password')) return;
-
-  const salt = await bcrypt.genSalt(10);
-  this.password = await bcrypt.hash(this.password, salt);
+UserSchema.pre('save', async function (next) {
+  if (!this.isModified('password')) return next();
+  try {
+      const salt = await bcrypt.genSalt(10);
+      this.password = await bcrypt.hash(this.password, salt);
+      next(); // Tells Mongoose hashing is done, save the document now
+  } catch (err) {
+    next(err); // Safely passes any encryption errors to the database handler
+  }
 });
 
 // ✅ password comparison
 UserSchema.methods.comparePassword = async function (enteredPassword) {
   return bcrypt.compare(enteredPassword, this.password);
 };
 
-module.exports = mongoose.model("User", UserSchema);
+module.exports = mongoose.model("User", UserSchema);

src/components/ScrollProgressBar.tsx

@@ -61,18 +61,21 @@ const ScrollProgressBar = () => {
       {/* Scroll progress bar after animation ends */}
       {!isAnimating && (
         <div
-          style={{
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: `${scrollWidth}%`,
-            height: "3px",
-            backgroundColor: "#3b82f6",
-            zIndex: 100,
-            transition: "width 0.1s ease",
-          }}
-        />
-      )}
+        style={{
+          position: "fixed",
+          top: 0,
+          left: 0,
+          // Dynamically swaps between full width loading animation and real-time scroll updates
+          width: isAnimating ? "0" : `${scrollWidth}%`,
+          height: isAnimating ? "2px" : "3px",
+          backgroundColor: isAnimating ? "blue" : "#3b82f6",
+          zIndex: 100,
+          // Applies the loading animation curve ONLY during the initial loading phase
+          animation: isAnimating ? "slideIn 2s ease-in-out forwards" : "none",
+          // Applies smooth tracking ticks once scroll tracking takes over
+          transition: isAnimating ? "none" : "width 0.1s ease",
+        }}
+      />
 
       {/* Animation Keyframes */}
       <style>
@@ -90,5 +93,3 @@ const ScrollProgressBar = () => {
     </>
   );
 };
-
-export default ScrollProgressBar;

src/hooks/useDebounce.ts

@@ -1,17 +1,19 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from "react";
 
-export function useDebounce<T>(value: T, delay: number): T {
-  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+// Inside your custom useDebounce hook function:
+const isMounted = useRef(true); 
 
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
+useEffect(() => {
+  isMounted.current = true; 
 
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
+  const handler = setTimeout(() => {
+    if (isMounted.current) {
+      setDebouncedValue(value);
+    }
+  }, delay);
 
-  return debouncedValue;
-}
+  return () => {
+    clearTimeout(handler);   
+    isMounted.current = false; 
+  };
+}, [value, delay]);