From 7801872810551144c46becd50f5cf8580c4ec44c Mon Sep 17 00:00:00 2001 From: EthanHealy01 Date: Tue, 12 Aug 2025 15:53:49 +0100 Subject: [PATCH] remove skeleton loader --- .../components/shared/AllToolsNavButton.tsx | 70 +++++++++++++ .../src/components/shared/QuickAccessBar.tsx | 99 +++++-------------- .../src/components/tools/shared/ToolStep.tsx | 67 +++---------- frontend/src/data/toolRegistry.tsx | 3 +- frontend/src/tools/Compress.tsx | 2 - frontend/src/tools/Convert.tsx | 1 - frontend/src/tools/Split.tsx | 2 - 7 files changed, 112 insertions(+), 132 deletions(-) create mode 100644 frontend/src/components/shared/AllToolsNavButton.tsx diff --git a/frontend/src/components/shared/AllToolsNavButton.tsx b/frontend/src/components/shared/AllToolsNavButton.tsx new file mode 100644 index 000000000..75d69fb55 --- /dev/null +++ b/frontend/src/components/shared/AllToolsNavButton.tsx @@ -0,0 +1,70 @@ +import React, { useState } from 'react'; +import { ActionIcon, Tooltip } from '@mantine/core'; +import AppsIcon from '@mui/icons-material/AppsRounded'; +import ArrowBackIcon from '@mui/icons-material/ArrowBackRounded'; +import { useToolWorkflow } from '../../contexts/ToolWorkflowContext'; + +interface AllToolsNavButtonProps { + activeButton: string; + setActiveButton: (id: string) => void; +} + +const AllToolsNavButton: React.FC = ({ activeButton, setActiveButton }) => { + const { selectedTool, selectedToolKey, handleReaderToggle, handleBackToTools } = useToolWorkflow(); + const [isHovered, setIsHovered] = useState(false); + + const handleClick = () => { + setActiveButton('tools'); + // Preserve existing behavior used in QuickAccessBar header + handleReaderToggle(); + handleBackToTools(); + }; + + const isActive = activeButton === 'tools'; + + const iconNode = (() => { + if (selectedToolKey) { + if (isHovered) return ; + return ( + + {selectedTool?.icon ?? } + + ); + } + return ( + + + + ); + })(); + + return ( + +
+ setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + style={{ + backgroundColor: isActive ? 'var(--icon-tools-bg)' : 'var(--icon-inactive-bg)', + color: isActive ? 'var(--icon-tools-color)' : 'var(--icon-inactive-color)', + border: 'none', + borderRadius: '8px', + }} + className={isActive ? 'activeIconScale' : ''} + > + {iconNode} + + + All Tools + +
+ + ); +}; + +export default AllToolsNavButton; + + diff --git a/frontend/src/components/shared/QuickAccessBar.tsx b/frontend/src/components/shared/QuickAccessBar.tsx index 53f0ba94e..549def24b 100644 --- a/frontend/src/components/shared/QuickAccessBar.tsx +++ b/frontend/src/components/shared/QuickAccessBar.tsx @@ -1,12 +1,8 @@ import React, { useState, useRef, forwardRef } from "react"; import { ActionIcon, Stack, Tooltip, Divider } from "@mantine/core"; import MenuBookIcon from "@mui/icons-material/MenuBookRounded"; -import AppsIcon from "@mui/icons-material/AppsRounded"; import SettingsIcon from "@mui/icons-material/SettingsRounded"; -import AutoAwesomeIcon from "@mui/icons-material/AutoAwesomeRounded"; import FolderIcon from "@mui/icons-material/FolderRounded"; -import PersonIcon from "@mui/icons-material/PersonRounded"; -import NotificationsIcon from "@mui/icons-material/NotificationsRounded"; import { useRainbowThemeContext } from "./RainbowThemeProvider"; import AppConfigModal from './AppConfigModal'; import { useIsOverflowing } from '../../hooks/useIsOverflowing'; @@ -14,48 +10,7 @@ import { useFilesModalContext } from '../../contexts/FilesModalContext'; import { useToolWorkflow } from '../../contexts/ToolWorkflowContext'; import { ButtonConfig } from '../../types/sidebar'; import './QuickAccessBar.css'; - -function NavHeader({ - activeButton, - setActiveButton -}: { - activeButton: string; - setActiveButton: (id: string) => void; -}) { - const { handleReaderToggle, handleBackToTools } = useToolWorkflow(); - return ( - <> - {/* All Tools button below divider */} - -
- { - setActiveButton('tools'); - handleReaderToggle(); - handleBackToTools(); - }} - style={{ - backgroundColor: activeButton === 'tools' ? 'var(--icon-tools-bg)' : 'var(--icon-inactive-bg)', - color: activeButton === 'tools' ? 'var(--icon-tools-color)' : 'var(--icon-inactive-color)', - border: 'none', - borderRadius: '8px', - }} - className={activeButton === 'tools' ? 'activeIconScale' : ''} - > - - - - - - All Tools - -
- - - ); -} +import AllToolsNavButton from './AllToolsNavButton'; const QuickAccessBar = forwardRef(({ }, ref) => { @@ -88,10 +43,10 @@ const QuickAccessBar = forwardRef(({ { id: 'sign', name: 'Sign', - icon: - - signature - , + icon: + + signature + , tooltip: 'Sign your document', size: 'lg', isRound: false, @@ -101,10 +56,10 @@ const QuickAccessBar = forwardRef(({ { id: 'automate', name: 'Automate', - icon: - - automation - , + icon: + + automation + , tooltip: 'Automate workflows', size: 'lg', isRound: false, @@ -124,10 +79,10 @@ const QuickAccessBar = forwardRef(({ { id: 'activity', name: 'Activity', - icon: - - vital_signs - , + icon: + + vital_signs + , tooltip: 'View activity and analytics', isRound: true, size: 'lg', @@ -164,7 +119,7 @@ const QuickAccessBar = forwardRef(({ const getButtonStyle = (config: ButtonConfig) => { const isActive = isButtonActive(config); - + if (isActive) { return { backgroundColor: `var(--icon-${config.id}-bg)`, @@ -173,7 +128,7 @@ const QuickAccessBar = forwardRef(({ borderRadius: getBorderRadius(config), }; } - + // Inactive state for all buttons return { backgroundColor: 'var(--icon-inactive-bg)', @@ -194,16 +149,14 @@ const QuickAccessBar = forwardRef(({ > {/* Fixed header outside scrollable area */}
- + +
{/* Conditional divider when overflowing */} {isOverflow && ( - )} @@ -241,21 +194,21 @@ const QuickAccessBar = forwardRef(({ - + {/* Add divider after Automate button (index 2) */} {index === 2 && ( - + )} ))} - + {/* Spacer to push Config button to bottom */}
- + {/* Config button at the bottom */} {buttonConfigs .filter(config => config.id === 'config') diff --git a/frontend/src/components/tools/shared/ToolStep.tsx b/frontend/src/components/tools/shared/ToolStep.tsx index 93352c561..5ae6aec9b 100644 --- a/frontend/src/components/tools/shared/ToolStep.tsx +++ b/frontend/src/components/tools/shared/ToolStep.tsx @@ -1,4 +1,4 @@ -import React, { createContext, useContext, useMemo, useRef, useEffect, useState } from 'react'; +import React, { createContext, useContext, useMemo, useRef } from 'react'; import { Paper, Text, Stack, Box, Flex } from '@mantine/core'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ChevronRightIcon from '@mui/icons-material/ChevronRight'; @@ -22,10 +22,6 @@ export interface ToolStepProps { completedMessage?: string; helpText?: string; showNumber?: boolean; - /** Show a brief skeleton for smoother tool transitions */ - enableInitialSkeleton?: boolean; - /** Duration for the initial skeleton in milliseconds */ - initialSkeletonMs?: number; tooltip?: { content?: React.ReactNode; tips?: TooltipTip[]; @@ -78,8 +74,6 @@ const ToolStep = ({ completedMessage, helpText, showNumber, - enableInitialSkeleton = true, - initialSkeletonMs = 800, tooltip }: ToolStepProps) => { if (!isVisible) return null; @@ -94,16 +88,6 @@ 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 && ( - showInitialSkeleton ? ( - - ) : ( - - {stepNumber} - - ) - )} - {showInitialSkeleton ? ( - - ) : ( - renderTooltipTitle(title, tooltip, isCollapsed) + + {stepNumber} + )} + {renderTooltipTitle(title, tooltip, isCollapsed)} {isCollapsed ? ( @@ -157,19 +133,15 @@ const ToolStep = ({ {isCollapsed ? ( - {showInitialSkeleton ? ( - - ) : ( - isCompleted && completedMessage && ( - - ✓ {completedMessage} - {onCollapsedClick && ( - - (click to change) - - )} - - ) + {isCompleted && completedMessage && ( + + ✓ {completedMessage} + {onCollapsedClick && ( + + (click to change) + + )} + )} ) : ( @@ -179,16 +151,7 @@ const ToolStep = ({ {helpText} )} - {showInitialSkeleton ? ( - <> - - - - - - ) : ( - children - )} + {children} )} diff --git a/frontend/src/data/toolRegistry.tsx b/frontend/src/data/toolRegistry.tsx index b8f1381e2..9a5582ece 100644 --- a/frontend/src/data/toolRegistry.tsx +++ b/frontend/src/data/toolRegistry.tsx @@ -1,7 +1,6 @@ import React from 'react'; import SplitPdfPanel from "../tools/Split"; import CompressPdfPanel from "../tools/Compress"; -import MergePdfPanel from "../tools/Merge"; import OCRPanel from '../tools/OCR'; import ConvertPanel from '../tools/Convert'; @@ -282,7 +281,7 @@ export const flatToolRegistryMap: ToolRegistry = { "mergePdfs": { icon: library_add, name: "home.merge.title", - component: MergePdfPanel, + component: null, view: "merge", description: "home.merge.desc", category: "Recommended Tools", diff --git a/frontend/src/tools/Compress.tsx b/frontend/src/tools/Compress.tsx index d2d937cc8..f4b50b264 100644 --- a/frontend/src/tools/Compress.tsx +++ b/frontend/src/tools/Compress.tsx @@ -102,7 +102,6 @@ const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => { { {compressOperation.status && ( diff --git a/frontend/src/tools/Convert.tsx b/frontend/src/tools/Convert.tsx index 56a127d23..3512ca8eb 100644 --- a/frontend/src/tools/Convert.tsx +++ b/frontend/src/tools/Convert.tsx @@ -163,7 +163,6 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => { diff --git a/frontend/src/tools/Split.tsx b/frontend/src/tools/Split.tsx index d48b42cbd..e289e0d89 100644 --- a/frontend/src/tools/Split.tsx +++ b/frontend/src/tools/Split.tsx @@ -97,7 +97,6 @@ const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => { { {splitOperation.status && (