fix: stabilize IntersectionObserver threshold, add /settings to auth …

src/app/credentials/page.tsx

@@ -79,7 +79,13 @@ export default function CredentialsPage() {
     return sorted;
   }, [credentials, courseId, debouncedSearch, sort]);
 
-  if (!ready) return null;
+  if (!ready) {
+    return (
+      <div className="mx-auto max-w-4xl px-4 py-8">
+        <LoadingSkeleton count={4} />
+      </div>
+    );
+  }
 
   if (loading) {
     return (

src/app/dashboard/page.tsx

@@ -75,7 +75,13 @@ export default function DashboardPage() {
   const { credentials, loading: credentialsLoading, error: credentialsError } = useCredentials();
   const progress = useCourseStore((s) => s.progress);
 
-  if (!ready) return null;
+  if (!ready) {
+    return (
+      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+        <DashboardSkeleton />
+      </div>
+    );
+  }
 
   const isLoading =
     coursesLoading || rewardsLoading || credentialsLoading || recommendedLoading;

src/app/rewards/page.tsx

@@ -35,7 +35,13 @@ export default function RewardsPage() {
     }
   };
 
-  if (!ready) return null;
+  if (!ready) {
+    return (
+      <div className="mx-auto max-w-4xl px-4 py-8">
+        <LoadingSkeleton count={4} />
+      </div>
+    );
+  }
 
   if (loading) {
     return (

src/lib/hooks/use-intersection-observer.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState, RefObject } from "react";
+import { useEffect, useMemo, useState, RefObject } from "react";
 
 export interface UseIntersectionObserverOptions {
   threshold?: number | number[];
@@ -35,6 +35,10 @@ export function useIntersectionObserver(
   const isIntersecting = !!entry?.isIntersecting;
   const frozen = isIntersecting && freezeOnceVisible;
 
+  // Keyed on the serialized value so callers passing a new array literal each render don't rebuild the observer.
+  const thresholdKey = JSON.stringify(threshold);
+  const stableThreshold = useMemo<number | number[]>(() => JSON.parse(thresholdKey), [thresholdKey]);
+
   useEffect(() => {
     const node = elementRef?.current;
     if (!node || frozen || typeof window === "undefined" || !("IntersectionObserver" in window)) {
@@ -45,15 +49,15 @@ export function useIntersectionObserver(
       ([newEntry]) => {
         setEntry(newEntry);
       },
-      { threshold, root, rootMargin }
+      { threshold: stableThreshold, root, rootMargin }
     );
 
     observer.observe(node);
 
     return () => {
       observer.disconnect();
     };
-  }, [elementRef, JSON.stringify(threshold), root, rootMargin, frozen]);
+  }, [elementRef, stableThreshold, root, rootMargin, frozen]);
 
   return {
     isIntersecting,

src/middleware.ts

@@ -10,6 +10,7 @@ const PROTECTED_PREFIXES = [
   "/dashboard",
   "/rewards",
   "/credentials",
+  "/settings",
   "/courses/", // individual course pages, modules, quiz — NOT /courses list
 ];
 
@@ -89,6 +90,7 @@ export const config = {
     "/dashboard/:path*",
     "/rewards/:path*",
     "/credentials/:path*",
+    "/settings/:path*",
     "/courses/:courseId/:path*", // individual course + sub-pages only
     "/connect",
     "/onboarding",