Skip to content

Commit 2bd8361

Browse files
committed
chore: Update .cursorrules and FullScreenLoader component for improved functionality
- Added additional context regarding the use of Next.js, SWC, Styled Components, and Framer Motion in the .cursorrules file. - Enhanced FullScreenLoader component to conditionally disable loading on the /contact route, improving user experience. - Cleaned up rendering logic to ensure the loader only displays when necessary, optimizing performance and clarity.
1 parent a462969 commit 2bd8361

File tree

2 files changed

+26
-10
lines changed

2 files changed

+26
-10
lines changed

.cursorrules

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
- !!!We use pnpm as our package manager, as well as pnpm workspaces to help manage our monorepo packages
2+
- We are using Next.js with SSR and App Router
3+
- We are using SWC to transpile our code, only suggest Babel if SWC is not an option anymore
4+
- We are using Styled Components and Framer Motion for animations
25
- We use turbo repo to help manage and optimize our monorepo
36
- ALWAYS remove unnecessary comments when refactoring
47
- ALWAYS remove unused imports when refactoring or finishing a task

src/shared-components/organisms/FullScreenLoader/FullScreenLoader.tsx

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import React, { useState, useEffect } from 'react';
44
import { createPortal } from 'react-dom';
5+
import { usePathname } from 'next/navigation';
56
import { useLoading } from '@contexts/LoadingContext';
67
import { SpinnerLoader } from '@shared-components/atoms/SpinnerLoader';
78
import { OverlayContainer } from './FullScreenLoader.styles';
@@ -11,37 +12,49 @@ import { OverlayContainer } from './FullScreenLoader.styles';
1112
*
1213
* Renders a full-screen loading overlay controlled by the LoadingContext.
1314
* Uses React Portal to attach directly to document.body.
15+
* Conditionally disables itself on the /contact route.
1416
*/
1517
export function FullScreenLoader() {
1618
// Get isLoading, loadingText, and spinnerType from context
1719
const { isLoading, loadingText, spinnerType } = useLoading();
1820
const [isMounted, setIsMounted] = useState(false);
21+
const pathname = usePathname();
1922

2023
useEffect(() => {
2124
// Ensure component is mounted on the client before attempting to portal
2225
setIsMounted(true);
2326
}, []);
2427

25-
// Don't render anything during SSR or if not loading
28+
// Determine if the loader should be active
29+
const shouldShowLoader = isLoading && pathname !== '/contact';
30+
31+
// Don't render anything during SSR or if not loading/on contact page
2632
if (!isMounted) {
2733
return null;
2834
}
2935

36+
// Conditionally render the portal based on shouldShowLoader
37+
// The OverlayContainer itself can remain in the DOM for structure if needed,
38+
// but we'll control visibility and content rendering based on shouldShowLoader.
39+
// A simpler approach for now: only portal when needed.
40+
if (!shouldShowLoader) {
41+
return null; // Completely skip rendering if loader shouldn't be shown
42+
}
43+
3044
return createPortal(
31-
<OverlayContainer
32-
data-visible={isLoading}
33-
aria-hidden={!isLoading}
45+
<OverlayContainer
46+
data-visible={shouldShowLoader} // Use combined condition for visibility
47+
aria-hidden={!shouldShowLoader}
3448
aria-live="assertive" // Announce changes to screen readers
3549
role="status" // Semantically identify as status update
3650
>
37-
{/* We only render the spinner *contents* when isLoading is true,
38-
but the overlay is always in the DOM for smooth transitions */}
39-
{isLoading && (
40-
<SpinnerLoader
51+
{/* Render spinner only when shouldShowLoader is true */}
52+
{shouldShowLoader && (
53+
<SpinnerLoader
4154
// Use the spinnerType from context
42-
type={spinnerType}
55+
type={spinnerType}
4356
color="#2196f3" // Consider theme variable
44-
size={70}
57+
size={70}
4558
text={loadingText || undefined} // Pass text from context
4659
/>
4760
)}

0 commit comments

Comments
 (0)