mirror of
https://github.com/MODSetter/SurfSense.git
synced 2025-09-01 18:19:08 +00:00
fix: optimized to reduce rerenders
Some checks are pending
pre-commit / pre-commit (push) Waiting to run
Some checks are pending
pre-commit / pre-commit (push) Waiting to run
This commit is contained in:
MSI\ModSetter
parent
a6340fdf2b
commit
113636d1b1
2 changed files with 268 additions and 151 deletions
|
|
@ -1,45 +1,137 @@
|
|||
"use client";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Manrope } from "next/font/google";
|
||||
import React, { useRef, useEffect, useState } from "react";
|
||||
import React, {
|
||||
useRef,
|
||||
useEffect,
|
||||
useReducer,
|
||||
useMemo
|
||||
} from "react";
|
||||
import { RoughNotation, RoughNotationGroup } from "react-rough-notation";
|
||||
import { useInView } from "framer-motion";
|
||||
import { useSidebar } from "@/components/ui/sidebar";
|
||||
|
||||
const manrope = Manrope({ subsets: ["latin"], weight: ["400", "700"] });
|
||||
// Font configuration - could be moved to a global font config file
|
||||
const manrope = Manrope({
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "700"],
|
||||
display: "swap", // Optimize font loading
|
||||
variable: "--font-manrope"
|
||||
});
|
||||
|
||||
// Constants for timing - makes it easier to adjust and more maintainable
|
||||
const TIMING = {
|
||||
SIDEBAR_TRANSITION: 300, // Wait for sidebar transition + buffer
|
||||
LAYOUT_SETTLE: 100, // Small delay to ensure layout is fully settled
|
||||
} as const;
|
||||
|
||||
// Animation configuration
|
||||
const ANIMATION_CONFIG = {
|
||||
HIGHLIGHT: {
|
||||
type: "highlight" as const,
|
||||
animationDuration: 2000,
|
||||
iterations: 3,
|
||||
color: "#3b82f680",
|
||||
multiline: true,
|
||||
},
|
||||
UNDERLINE: {
|
||||
type: "underline" as const,
|
||||
animationDuration: 2000,
|
||||
iterations: 3,
|
||||
color: "#10b981",
|
||||
},
|
||||
} as const;
|
||||
|
||||
// State management with useReducer for better organization
|
||||
interface HighlightState {
|
||||
shouldShowHighlight: boolean;
|
||||
layoutStable: boolean;
|
||||
}
|
||||
|
||||
type HighlightAction =
|
||||
| { type: "SIDEBAR_CHANGED" }
|
||||
| { type: "LAYOUT_STABILIZED" }
|
||||
| { type: "SHOW_HIGHLIGHT" }
|
||||
| { type: "HIDE_HIGHLIGHT" };
|
||||
|
||||
const highlightReducer = (
|
||||
state: HighlightState,
|
||||
action: HighlightAction
|
||||
): HighlightState => {
|
||||
switch (action.type) {
|
||||
case "SIDEBAR_CHANGED":
|
||||
return {
|
||||
shouldShowHighlight: false,
|
||||
layoutStable: false,
|
||||
};
|
||||
case "LAYOUT_STABILIZED":
|
||||
return {
|
||||
...state,
|
||||
layoutStable: true,
|
||||
};
|
||||
case "SHOW_HIGHLIGHT":
|
||||
return {
|
||||
...state,
|
||||
shouldShowHighlight: true,
|
||||
};
|
||||
case "HIDE_HIGHLIGHT":
|
||||
return {
|
||||
...state,
|
||||
shouldShowHighlight: false,
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
|
||||
const initialState: HighlightState = {
|
||||
shouldShowHighlight: false,
|
||||
layoutStable: true,
|
||||
};
|
||||
|
||||
export function AnimatedEmptyState() {
|
||||
const ref = useRef(null);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const isInView = useInView(ref);
|
||||
const { state } = useSidebar();
|
||||
const [shouldShowHighlight, setShouldShowHighlight] = useState(false);
|
||||
const [layoutStable, setLayoutStable] = useState(true);
|
||||
const { state: sidebarState } = useSidebar();
|
||||
const [{ shouldShowHighlight, layoutStable }, dispatch] = useReducer(
|
||||
highlightReducer,
|
||||
initialState
|
||||
);
|
||||
|
||||
// Track sidebar state changes and manage highlight visibility
|
||||
// Memoize class names to prevent unnecessary recalculations
|
||||
const headingClassName = useMemo(() => cn(
|
||||
"text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50 mb-6",
|
||||
manrope.className,
|
||||
), []);
|
||||
|
||||
const paragraphClassName = useMemo(() =>
|
||||
"text-lg sm:text-xl text-neutral-600 dark:text-neutral-300 mb-8 max-w-2xl mx-auto",
|
||||
[]);
|
||||
|
||||
// Handle sidebar state changes
|
||||
useEffect(() => {
|
||||
// Set layout as unstable when sidebar state changes
|
||||
setLayoutStable(false);
|
||||
setShouldShowHighlight(false);
|
||||
dispatch({ type: "SIDEBAR_CHANGED" });
|
||||
|
||||
// Wait for layout to stabilize after sidebar transition
|
||||
const stabilizeTimer = setTimeout(() => {
|
||||
setLayoutStable(true);
|
||||
}, 300); // Wait for sidebar transition (200ms) + buffer
|
||||
dispatch({ type: "LAYOUT_STABILIZED" });
|
||||
}, TIMING.SIDEBAR_TRANSITION);
|
||||
|
||||
return () => clearTimeout(stabilizeTimer);
|
||||
}, [state]);
|
||||
}, [sidebarState]);
|
||||
|
||||
// Re-enable highlights after layout stabilizes and component is in view
|
||||
// Handle highlight visibility based on layout stability and viewport visibility
|
||||
useEffect(() => {
|
||||
if (layoutStable && isInView) {
|
||||
const showTimer = setTimeout(() => {
|
||||
setShouldShowHighlight(true);
|
||||
}, 100); // Small delay to ensure layout is fully settled
|
||||
|
||||
return () => clearTimeout(showTimer);
|
||||
} else {
|
||||
setShouldShowHighlight(false);
|
||||
if (!layoutStable || !isInView) {
|
||||
dispatch({ type: "HIDE_HIGHLIGHT" });
|
||||
return;
|
||||
}
|
||||
|
||||
const showTimer = setTimeout(() => {
|
||||
dispatch({ type: "SHOW_HIGHLIGHT" });
|
||||
}, TIMING.LAYOUT_SETTLE);
|
||||
|
||||
return () => clearTimeout(showTimer);
|
||||
}, [layoutStable, isInView]);
|
||||
|
||||
return (
|
||||
|
|
@ -49,30 +141,14 @@ export function AnimatedEmptyState() {
|
|||
>
|
||||
<div className="max-w-4xl mx-auto px-4 py-10 text-center">
|
||||
<RoughNotationGroup show={shouldShowHighlight}>
|
||||
<h1
|
||||
className={cn(
|
||||
"text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50 mb-6",
|
||||
manrope.className,
|
||||
)}
|
||||
>
|
||||
<RoughNotation
|
||||
type="highlight"
|
||||
animationDuration={2000}
|
||||
iterations={3}
|
||||
color="#3b82f680"
|
||||
multiline
|
||||
>
|
||||
<h1 className={headingClassName}>
|
||||
<RoughNotation {...ANIMATION_CONFIG.HIGHLIGHT}>
|
||||
<span>SurfSense</span>
|
||||
</RoughNotation>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg sm:text-xl text-neutral-600 dark:text-neutral-300 mb-8 max-w-2xl mx-auto">
|
||||
<RoughNotation
|
||||
type="underline"
|
||||
animationDuration={2000}
|
||||
iterations={3}
|
||||
color="#10b981"
|
||||
>
|
||||
<p className={paragraphClassName}>
|
||||
<RoughNotation {...ANIMATION_CONFIG.UNDERLINE}>
|
||||
Let's Start Surfing
|
||||
</RoughNotation>{" "}
|
||||
through your knowledge base.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import React, { useState, useEffect, useMemo, useCallback } from "react";
|
||||
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
||||
import {
|
||||
oneLight,
|
||||
|
|
@ -9,13 +9,66 @@ import {
|
|||
import { Check, Copy } from "lucide-react";
|
||||
import { useTheme } from "next-themes";
|
||||
|
||||
// Code block component with syntax highlighting and copy functionality
|
||||
export const CodeBlock = ({
|
||||
children,
|
||||
language,
|
||||
}: {
|
||||
// Constants for styling and configuration
|
||||
const COPY_TIMEOUT = 2000;
|
||||
|
||||
const BASE_CUSTOM_STYLE = {
|
||||
margin: 0,
|
||||
borderRadius: "0.375rem",
|
||||
fontSize: "0.75rem",
|
||||
lineHeight: "1.5rem",
|
||||
border: "none",
|
||||
} as const;
|
||||
|
||||
const LINE_PROPS_STYLE = {
|
||||
wordBreak: "break-all" as const,
|
||||
whiteSpace: "pre-wrap" as const,
|
||||
border: "none",
|
||||
borderBottom: "none",
|
||||
paddingLeft: 0,
|
||||
paddingRight: 0,
|
||||
margin: "0.25rem 0",
|
||||
} as const;
|
||||
|
||||
const CODE_TAG_PROPS = {
|
||||
className: "font-mono",
|
||||
style: {
|
||||
border: "none",
|
||||
background: "var(--syntax-bg)",
|
||||
},
|
||||
} as const;
|
||||
|
||||
// TypeScript interfaces
|
||||
interface CodeBlockProps {
|
||||
children: string;
|
||||
language: string;
|
||||
}
|
||||
|
||||
interface LanguageRenderer {
|
||||
(props: { code: string }): React.JSX.Element;
|
||||
}
|
||||
|
||||
interface SyntaxStyle {
|
||||
[key: string]: React.CSSProperties;
|
||||
}
|
||||
|
||||
// Memoized fallback component for SSR/hydration
|
||||
const FallbackCodeBlock = React.memo(({ children }: { children: string }) => (
|
||||
<div className="bg-muted p-4 rounded-md">
|
||||
<pre className="m-0 p-0 border-0">
|
||||
<code className="text-xs font-mono border-0 leading-6">
|
||||
{children}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
));
|
||||
|
||||
FallbackCodeBlock.displayName = "FallbackCodeBlock";
|
||||
|
||||
// Code block component with syntax highlighting and copy functionality
|
||||
export const CodeBlock = React.memo<CodeBlockProps>(({
|
||||
children,
|
||||
language,
|
||||
}) => {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const { resolvedTheme, theme } = useTheme();
|
||||
|
|
@ -26,15 +79,62 @@ export const CodeBlock = ({
|
|||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
const handleCopy = async () => {
|
||||
await navigator.clipboard.writeText(children);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
// Memoize theme detection
|
||||
const isDarkTheme = useMemo(() =>
|
||||
mounted && (resolvedTheme === "dark" || theme === "dark"),
|
||||
[mounted, resolvedTheme, theme]
|
||||
);
|
||||
|
||||
// Choose theme based on current system/user preference
|
||||
const isDarkTheme = mounted && (resolvedTheme === "dark" || theme === "dark");
|
||||
const syntaxTheme = isDarkTheme ? oneDark : oneLight;
|
||||
// Memoize syntax theme selection
|
||||
const syntaxTheme = useMemo(() =>
|
||||
isDarkTheme ? oneDark : oneLight,
|
||||
[isDarkTheme]
|
||||
);
|
||||
|
||||
// Memoize enhanced style with theme-specific modifications
|
||||
const enhancedStyle = useMemo<SyntaxStyle>(() => ({
|
||||
...syntaxTheme,
|
||||
'pre[class*="language-"]': {
|
||||
...syntaxTheme['pre[class*="language-"]'],
|
||||
margin: 0,
|
||||
border: "none",
|
||||
borderRadius: "0.375rem",
|
||||
background: "var(--syntax-bg)",
|
||||
},
|
||||
'code[class*="language-"]': {
|
||||
...syntaxTheme['code[class*="language-"]'],
|
||||
border: "none",
|
||||
background: "var(--syntax-bg)",
|
||||
},
|
||||
}), [syntaxTheme]);
|
||||
|
||||
// Memoize custom style with background
|
||||
const customStyle = useMemo(() => ({
|
||||
...BASE_CUSTOM_STYLE,
|
||||
backgroundColor: "var(--syntax-bg)",
|
||||
}), []);
|
||||
|
||||
// Memoized copy handler
|
||||
const handleCopy = useCallback(async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(children);
|
||||
setCopied(true);
|
||||
const timeoutId = setTimeout(() => setCopied(false), COPY_TIMEOUT);
|
||||
return () => clearTimeout(timeoutId);
|
||||
} catch (error) {
|
||||
console.warn("Failed to copy code to clipboard:", error);
|
||||
}
|
||||
}, [children]);
|
||||
|
||||
// Memoized line props with style
|
||||
const lineProps = useMemo(() => ({
|
||||
style: LINE_PROPS_STYLE,
|
||||
}), []);
|
||||
|
||||
// Early return for non-mounted state
|
||||
if (!mounted) {
|
||||
return <FallbackCodeBlock>{children}</FallbackCodeBlock>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative my-4 group">
|
||||
|
|
@ -43,6 +143,7 @@ export const CodeBlock = ({
|
|||
onClick={handleCopy}
|
||||
className="p-1.5 rounded-md bg-background/80 hover:bg-background border border-border flex items-center justify-center transition-colors"
|
||||
aria-label="Copy code"
|
||||
type="button"
|
||||
>
|
||||
{copied ? (
|
||||
<Check size={14} className="text-green-500" />
|
||||
|
|
@ -51,103 +152,43 @@ export const CodeBlock = ({
|
|||
)}
|
||||
</button>
|
||||
</div>
|
||||
{mounted ? (
|
||||
<SyntaxHighlighter
|
||||
language={language || "text"}
|
||||
style={{
|
||||
...syntaxTheme,
|
||||
'pre[class*="language-"]': {
|
||||
...syntaxTheme['pre[class*="language-"]'],
|
||||
margin: 0,
|
||||
border: "none",
|
||||
borderRadius: "0.375rem",
|
||||
background: "var(--syntax-bg)",
|
||||
},
|
||||
'code[class*="language-"]': {
|
||||
...syntaxTheme['code[class*="language-"]'],
|
||||
border: "none",
|
||||
background: "var(--syntax-bg)",
|
||||
},
|
||||
}}
|
||||
customStyle={{
|
||||
margin: 0,
|
||||
borderRadius: "0.375rem",
|
||||
fontSize: "0.75rem",
|
||||
lineHeight: "1.5rem",
|
||||
backgroundColor: "var(--syntax-bg)",
|
||||
border: "none",
|
||||
}}
|
||||
codeTagProps={{
|
||||
className: "font-mono",
|
||||
style: {
|
||||
border: "none",
|
||||
background: "var(--syntax-bg)",
|
||||
},
|
||||
}}
|
||||
showLineNumbers={false}
|
||||
wrapLines={false}
|
||||
lineProps={{
|
||||
style: {
|
||||
wordBreak: "break-all",
|
||||
whiteSpace: "pre-wrap",
|
||||
border: "none",
|
||||
borderBottom: "none",
|
||||
paddingLeft: 0,
|
||||
paddingRight: 0,
|
||||
margin: "0.25rem 0",
|
||||
},
|
||||
}}
|
||||
PreTag="div"
|
||||
>
|
||||
{children}
|
||||
</SyntaxHighlighter>
|
||||
) : (
|
||||
<div className="bg-muted p-4 rounded-md">
|
||||
<pre className="m-0 p-0 border-0">
|
||||
<code className="text-xs font-mono border-0 leading-6">
|
||||
{children}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
<SyntaxHighlighter
|
||||
language={language || "text"}
|
||||
style={enhancedStyle}
|
||||
customStyle={customStyle}
|
||||
codeTagProps={CODE_TAG_PROPS}
|
||||
showLineNumbers={false}
|
||||
wrapLines={false}
|
||||
lineProps={lineProps}
|
||||
PreTag="div"
|
||||
>
|
||||
{children}
|
||||
</SyntaxHighlighter>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
// Create language renderer function
|
||||
const createLanguageRenderer = (lang: string) =>
|
||||
({ code }: { code: string }) => (
|
||||
CodeBlock.displayName = "CodeBlock";
|
||||
|
||||
// Optimized language renderer factory with memoization
|
||||
const createLanguageRenderer = (lang: string): LanguageRenderer => {
|
||||
const renderer = ({ code }: { code: string }) => (
|
||||
<CodeBlock language={lang}>{code}</CodeBlock>
|
||||
);
|
||||
renderer.displayName = `LanguageRenderer(${lang})`;
|
||||
return renderer;
|
||||
};
|
||||
|
||||
// Define language renderers for common programming languages
|
||||
export const languageRenderers = {
|
||||
"javascript": createLanguageRenderer("javascript"),
|
||||
"typescript": createLanguageRenderer("typescript"),
|
||||
"python": createLanguageRenderer("python"),
|
||||
"java": createLanguageRenderer("java"),
|
||||
"csharp": createLanguageRenderer("csharp"),
|
||||
"cpp": createLanguageRenderer("cpp"),
|
||||
"c": createLanguageRenderer("c"),
|
||||
"php": createLanguageRenderer("php"),
|
||||
"ruby": createLanguageRenderer("ruby"),
|
||||
"go": createLanguageRenderer("go"),
|
||||
"rust": createLanguageRenderer("rust"),
|
||||
"swift": createLanguageRenderer("swift"),
|
||||
"kotlin": createLanguageRenderer("kotlin"),
|
||||
"scala": createLanguageRenderer("scala"),
|
||||
"sql": createLanguageRenderer("sql"),
|
||||
"json": createLanguageRenderer("json"),
|
||||
"xml": createLanguageRenderer("xml"),
|
||||
"yaml": createLanguageRenderer("yaml"),
|
||||
"bash": createLanguageRenderer("bash"),
|
||||
"shell": createLanguageRenderer("shell"),
|
||||
"powershell": createLanguageRenderer("powershell"),
|
||||
"dockerfile": createLanguageRenderer("dockerfile"),
|
||||
"html": createLanguageRenderer("html"),
|
||||
"css": createLanguageRenderer("css"),
|
||||
"scss": createLanguageRenderer("scss"),
|
||||
"less": createLanguageRenderer("less"),
|
||||
"markdown": createLanguageRenderer("markdown"),
|
||||
"text": createLanguageRenderer("text"),
|
||||
};
|
||||
// Pre-defined supported languages for better maintainability
|
||||
const SUPPORTED_LANGUAGES = [
|
||||
"javascript", "typescript", "python", "java", "csharp", "cpp", "c",
|
||||
"php", "ruby", "go", "rust", "swift", "kotlin", "scala", "sql",
|
||||
"json", "xml", "yaml", "bash", "shell", "powershell", "dockerfile",
|
||||
"html", "css", "scss", "less", "markdown", "text"
|
||||
] as const;
|
||||
|
||||
// Generate language renderers efficiently
|
||||
export const languageRenderers: Record<string, LanguageRenderer> =
|
||||
Object.fromEntries(
|
||||
SUPPORTED_LANGUAGES.map(lang => [lang, createLanguageRenderer(lang)])
|
||||
);
|
||||
Loading…
Add table
Reference in a new issue