@djangocfg/layouts 2.1.48 → 2.1.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.48",
+  "version": "2.1.49",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -92,12 +92,13 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.48",
-    "@djangocfg/centrifugo": "^2.1.48",
-    "@djangocfg/ui-nextjs": "^2.1.48",
+    "@djangocfg/api": "^2.1.49",
+    "@djangocfg/centrifugo": "^2.1.49",
+    "@djangocfg/ui-nextjs": "^2.1.49",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
+    "moment": "^2.30.1",
     "next": ">=15.0.0",
     "p-retry": "^7.0.0",
     "react": "^19.1.0",
@@ -107,15 +108,15 @@
     "swr": "^2.3.7",
     "tailwindcss": "^4.1.14",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^4.1.13",
-    "moment": "^2.30.1"
+    "zod": "^4.1.13"
   },
   "dependencies": {
+    "nextjs-toploader": "^3.9.17",
     "react-ga4": "^2.1.0",
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.48",
+    "@djangocfg/typescript-config": "^2.1.49",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
@@ -126,4 +127,3 @@
     "access": "public"
   }
 }
-

package/src/components/core/index.ts

@@ -7,6 +7,5 @@ export type { ClientOnlyProps } from './ClientOnly';
 export { JsonLd } from './JsonLd';
 export { LucideIcon } from './LucideIcon';
 export type { LucideIconProps } from './LucideIcon';
-export { PageProgress } from './PageProgress';
 export { Suspense } from './Suspense';
 

package/src/index.ts

@@ -28,6 +28,10 @@
 // Layout components
 export * from './layouts';
 
+// Re-export useRouter from nextjs-toploader for progress bar support
+// Use this instead of 'next/navigation' useRouter for router.push() to trigger progress
+export { useRouter } from 'nextjs-toploader/app';
+
 // Snippets - Reusable UI components (includes Analytics)
 export * from './snippets';
 

package/src/layouts/AppLayout/BaseApp.tsx

@@ -45,6 +45,7 @@
 'use client';
 
 import dynamic from 'next/dynamic';
+import NextTopLoader from 'nextjs-toploader';
 import { ReactNode } from 'react';
 import { SWRConfig } from 'swr';
 
@@ -52,8 +53,6 @@ import { getCentrifugoAuthTokenRetrieve } from '@djangocfg/api';
 import { AuthProvider } from '@djangocfg/api/auth';
 import { CentrifugoProvider } from '@djangocfg/centrifugo';
 import { SonnerToaster, ThemeProvider, TooltipProvider } from '@djangocfg/ui-nextjs';
-
-import { PageProgress } from '../../components/core/PageProgress';
 import { ErrorBoundary } from '../../components/errors/ErrorBoundary';
 import { ErrorTrackingProvider } from '../../components/errors/ErrorsTracker';
 import { AnalyticsProvider } from '../../snippets/Analytics';
@@ -143,7 +142,12 @@ export function BaseApp({
                       onError={errorTracking?.onError}
                     >
                       {children}
-                      <PageProgress />
+                      <NextTopLoader
+                        color="hsl(var(--primary))"
+                        height={3}
+                        showSpinner={false}
+                        shadow="0 0 10px hsl(var(--primary)), 0 0 5px hsl(var(--primary))"
+                      />
                       <SonnerToaster />
 
                       {/* PWA Install Hint */}

package/src/snippets/PushNotifications/components/PushPrompt.tsx

@@ -10,6 +10,7 @@
 import { Bell, X } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
 
+import { useAuth } from '@djangocfg/api/auth';
 import { Button } from '@djangocfg/ui-nextjs';
 
 import { usePushNotifications } from '../hooks/usePushNotifications';
@@ -60,6 +61,7 @@ export function PushPrompt({
   onEnabled,
   onDismissed,
 }: PushPromptProps) {
+  const { isAuthenticated, isLoading: isAuthLoading } = useAuth();
   const { isSupported, permission, isSubscribed, subscribe } = usePushNotifications({
     vapidPublicKey,
     subscribeEndpoint,
@@ -70,6 +72,11 @@ export function PushPrompt({
 
   // Check if should show
   useEffect(() => {
+    // Wait for auth to complete, don't show for unauthenticated users
+    if (isAuthLoading || !isAuthenticated) {
+      return;
+    }
+
     if (!isSupported || isSubscribed || permission === 'denied') {
       return;
     }
@@ -89,7 +96,7 @@ export function PushPrompt({
     // Show after delay
     const timer = setTimeout(() => setShow(true), delayMs);
     return () => clearTimeout(timer);
-  }, [isSupported, isSubscribed, permission, requirePWA, resetAfterDays, delayMs]);
+  }, [isAuthLoading, isAuthenticated, isSupported, isSubscribed, permission, requirePWA, resetAfterDays, delayMs]);
 
   const handleEnable = async () => {
     setEnabling(true);

package/src/components/core/PageProgress.tsx

@@ -1,127 +0,0 @@
-/**
- * PageProgress - Loading progress bar
- * 
- * Shows a progress bar at the top of the page during route transitions
- */
-
-'use client';
-
-import { usePathname } from 'next/navigation';
-import { useEffect, useRef, useState } from 'react';
-
-export function PageProgress() {
-  const pathname = usePathname();
-  const [loading, setLoading] = useState(false);
-  const [progress, setProgress] = useState(0);
-  const [mounted, setMounted] = useState(false);
-  const progressTimer = useRef<NodeJS.Timeout | null>(null);
-  const prevPathname = useRef<string | null>(null);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  // Simulate realistic progress
-  const startFakeProgress = () => {
-    // Clear any existing timer
-    if (progressTimer.current) {
-      clearInterval(progressTimer.current);
-    }
-
-    setProgress(0);
-
-    // Quickly go to 20% to show immediate feedback
-    setTimeout(() => setProgress(20), 50);
-
-    // Then slowly increase to 90% (never reach 100% until actually complete)
-    progressTimer.current = setInterval(() => {
-      setProgress((prevProgress) => {
-        if (prevProgress >= 90) {
-          if (progressTimer.current) {
-            clearInterval(progressTimer.current);
-          }
-          return 90;
-        }
-
-        // Slow down as we get closer to 90%
-        const increment = 90 - prevProgress;
-        return prevProgress + (increment / 10);
-      });
-    }, 300);
-  };
-
-  const completeProgress = () => {
-    // Clear any existing timer
-    if (progressTimer.current) {
-      clearInterval(progressTimer.current);
-      progressTimer.current = null;
-    }
-
-    // Jump to 100% and then hide after showing completion
-    setProgress(100);
-    setTimeout(() => {
-      setLoading(false);
-      setTimeout(() => {
-        setProgress(0);
-      }, 300); // Wait for fade out animation
-    }, 500); // Show 100% for half a second
-  };
-
-  // Track pathname changes (App Router equivalent of routeChangeStart/Complete)
-  useEffect(() => {
-    // Skip on initial mount
-    if (prevPathname.current === null) {
-      prevPathname.current = pathname;
-      return;
-    }
-
-    // Only trigger if pathname actually changed
-    if (prevPathname.current !== pathname) {
-      setLoading(true);
-      startFakeProgress();
-      
-      // Complete progress after a short delay (simulating route change)
-      const timeout = setTimeout(() => {
-        completeProgress();
-        prevPathname.current = pathname;
-      }, 100);
-
-      return () => {
-        clearTimeout(timeout);
-        if (progressTimer.current) {
-          clearInterval(progressTimer.current);
-        }
-      };
-    }
-  }, [pathname]);
-
-  if (!mounted) {
-    return null;
-  }
-
-  return (
-    <div
-      data-page-progress="root"
-      data-loading={loading}
-      data-progress={progress}
-      className={`fixed top-0 left-0 w-full transition-opacity duration-300 ${
-        loading ? 'opacity-100' : 'opacity-0'
-      }`}
-      style={{
-        zIndex: 99999,
-        height: '3px',
-      }}
-    >
-      <div
-        className="h-full transition-all duration-200 ease-linear"
-        style={{
-          width: `${progress}%`,
-          background: 'linear-gradient(90deg, #3b82f6 0%, #60a5fa 50%, #3b82f6 100%)',
-          boxShadow: '0 0 10px rgba(59, 130, 246, 0.6), 0 0 20px rgba(59, 130, 246, 0.4), 0 0 30px rgba(59, 130, 246, 0.2)',
-          filter: 'drop-shadow(0 0 8px rgba(59, 130, 246, 0.8))',
-        }}
-      />
-    </div>
-  );
-}
-