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 && (