diff --git a/frontend/src/components/tools/ToolPanel.tsx b/frontend/src/components/tools/ToolPanel.tsx index 97172e7ed..5984046d2 100644 --- a/frontend/src/components/tools/ToolPanel.tsx +++ b/frontend/src/components/tools/ToolPanel.tsx @@ -109,10 +109,12 @@ export default function ToolPanel() {
{/* Tool content */}
- + {selectedToolKey && ( + + )}
)} diff --git a/frontend/src/components/tools/ToolRenderer.tsx b/frontend/src/components/tools/ToolRenderer.tsx index 493470935..4a3146613 100644 --- a/frontend/src/components/tools/ToolRenderer.tsx +++ b/frontend/src/components/tools/ToolRenderer.tsx @@ -26,7 +26,7 @@ const ToolRenderer = ({ // Wrap lazy-loaded component with Suspense return ( - }> + }> { if (!isVisible) return null; @@ -88,6 +94,16 @@ const ToolStep = ({ const stepNumber = parent?.getStepNumber?.() || 1; + // Show a step-sized skeleton immediately after mount to indicate tool switch + const [showInitialSkeleton, setShowInitialSkeleton] = useState(enableInitialSkeleton); + useEffect(() => { + if (!enableInitialSkeleton) return; + setShowInitialSkeleton(true); + const id = setTimeout(() => setShowInitialSkeleton(false), initialSkeletonMs); + return () => clearTimeout(id); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + return ( {shouldShowNumber && ( - - {stepNumber} - + showInitialSkeleton ? ( + + ) : ( + + {stepNumber} + + ) + )} + {showInitialSkeleton ? ( + + ) : ( + renderTooltipTitle(title, tooltip, isCollapsed) )} - {renderTooltipTitle(title, tooltip, isCollapsed)} {isCollapsed ? ( @@ -133,15 +157,19 @@ const ToolStep = ({ {isCollapsed ? ( - {isCompleted && completedMessage && ( - - ✓ {completedMessage} - {onCollapsedClick && ( - - (click to change) - - )} - + {showInitialSkeleton ? ( + + ) : ( + isCompleted && completedMessage && ( + + ✓ {completedMessage} + {onCollapsedClick && ( + + (click to change) + + )} + + ) )} ) : ( @@ -151,7 +179,16 @@ const ToolStep = ({ {helpText} )} - {children} + {showInitialSkeleton ? ( + <> + + + + + + ) : ( + children + )} )} diff --git a/frontend/src/data/toolRegistry.tsx b/frontend/src/data/toolRegistry.tsx index 1c28bf194..b8f1381e2 100644 --- a/frontend/src/data/toolRegistry.tsx +++ b/frontend/src/data/toolRegistry.tsx @@ -514,33 +514,6 @@ export const flatToolRegistryMap: ToolRegistry = { category: "Standard Tools", subcategory: "Page Formatting" }, - "split": { - icon: content_cut, - name: "home.split.title", - component: null, - view: "format", - description: "home.split.desc", - category: "Standard Tools", - subcategory: "Page Formatting" - }, - "split-by-chapters": { - icon: collections_bookmark, - name: "home.splitPdfByChapters.title", - component: null, - view: "format", - description: "home.splitPdfByChapters.desc", - category: "Advanced Tools", - subcategory: "Advanced Formatting" - }, - "split-by-sections": { - icon: grid_on, - name: "home.split-by-sections.title", - component: null, - view: "format", - description: "home.split-by-sections.desc", - category: "Advanced Tools", - subcategory: "Advanced Formatting" - }, "splitPdf": { icon: content_cut, name: "home.split.title", @@ -594,7 +567,7 @@ function buildStructuredRegistry(): ToolRegistryStructured { for (const [id, tool] of entries) { const sub = tool.subcategory ?? 'General'; const cat = tool.category ?? 'OTHER'; - // Quick access: use the existing "Recommended Tools" category + // Quick access: use the existing "Recommended Tools" category, this will change in future if (tool.category === 'Recommended Tools') { quick.push({ id, ...tool }); } diff --git a/frontend/src/tools/Compress.tsx b/frontend/src/tools/Compress.tsx index f4b50b264..d2d937cc8 100644 --- a/frontend/src/tools/Compress.tsx +++ b/frontend/src/tools/Compress.tsx @@ -102,6 +102,7 @@ const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => { { {compressOperation.status && ( diff --git a/frontend/src/tools/Convert.tsx b/frontend/src/tools/Convert.tsx index 3512ca8eb..56a127d23 100644 --- a/frontend/src/tools/Convert.tsx +++ b/frontend/src/tools/Convert.tsx @@ -163,6 +163,7 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => { diff --git a/frontend/src/tools/Split.tsx b/frontend/src/tools/Split.tsx index bc516c754..d48b42cbd 100644 --- a/frontend/src/tools/Split.tsx +++ b/frontend/src/tools/Split.tsx @@ -96,7 +96,8 @@ const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => { {/* Settings Step */} { {splitOperation.status && (