feat(frontend):add-loading-bar-when-intialize-project #193
Conversation
WalkthroughThe changes in this pull request enhance the Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant CE as CodeEngine
participant LS as LocalStorage
U->>CE: Load Component
CE->>LS: Check project completion flag
LS-->>CE: Return completion status
alt Project Completed
CE->>CE: Update state to completed
CE->>U: Display success animation
else Not Completed
loop Polling Timer
CE->>CE: Update progress and timer effects
end
CE->>U: Render loading indicator
end
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
frontend/src/components/chat/code-engine/code-engine.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/frontend/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
frontend/src/components/chat/code-engine/code-engine.tsx (6)
42-50: New state variables for progress tracking look goodThe state variables for tracking project loading progress are well-structured and serve a clear purpose in enhancing user experience during initialization.
A small improvement suggestion: consider translating the Chinese comments to English to maintain consistency with the rest of the codebase.
- const [progress, setProgress] = useState(0); // 从0%开始 + const [progress, setProgress] = useState(0); // Starting from 0% - const [estimateTime, setEstimateTime] = useState(6 * 60); // 保留估计时间 + const [estimateTime, setEstimateTime] = useState(6 * 60); // Store estimated time - const initialTime = 6 * 60; // 初始总时间（6分钟） + const initialTime = 6 * 60; // Initial total time (6 minutes) - // 添加一个状态来跟踪完成动画 + // Add a state to track completion animation - // 添加一个ref来持久跟踪项目状态，避免重新渲染时丢失 + // Add a ref to persistently track project status, avoiding loss during re-renders
52-66: Good use of localStorage for persistenceUsing localStorage to remember if a project has been completed is a good approach for improving user experience across sessions. The implementation handles potential localStorage errors gracefully.
One minor improvement: consider extracting the localStorage key to a constant for reusability.
+ // Create constant for localStorage key + const PROJECT_COMPLETED_KEY = `project-completed-${chatId}`; + // 在组件挂载时从localStorage检查项目是否已完成 useEffect(() => { try { - const savedCompletion = localStorage.getItem( - `project-completed-${chatId}` - ); + const savedCompletion = localStorage.getItem(PROJECT_COMPLETED_KEY); if (savedCompletion === 'true') { setProjectCompleted(true); isProjectLoadedRef.current = true;And then use this constant in the other places where this key is used.
335-370: Animation handling looks good, but consider refactoring timeout chainingThe implementation of the completion animation workflow is functional, but the nested setTimeout calls could be improved for better readability and maintenance.
Consider refactoring the nested timeouts using a more structured approach:
useEffect(() => { if (!showLoader && timerActive) { setIsCompleting(true); setProgress(99); - const completionTimer = setTimeout(() => { - setProgress(100); - setTimeout(() => { - setTimerActive(false); - setIsCompleting(false); - setProjectCompleted(true); - // 同时更新ref以持久记住完成状态 - isProjectLoadedRef.current = true; - - // 可选：在完成时将状态保存到localStorage - try { - localStorage.setItem(`project-completed-${chatId}`, 'true'); - } catch (e) { - // 忽略localStorage错误 - } - }, 800); - }, 500); + // Stage 1: Show 99% progress + const stage1Timer = setTimeout(() => { + setProgress(100); + }, 500); + + // Stage 2: Complete the process + const stage2Timer = setTimeout(() => { + setTimerActive(false); + setIsCompleting(false); + setProjectCompleted(true); + isProjectLoadedRef.current = true; + + // Save completion status to localStorage + try { + localStorage.setItem(`project-completed-${chatId}`, 'true'); + } catch (e) { + // Ignore localStorage errors + } + }, 1300); // 500ms + 800ms - return () => clearTimeout(completionTimer); + return () => { + clearTimeout(stage1Timer); + clearTimeout(stage2Timer); + };
348-353: Use the constant for localStorage key here as wellIf you implement the suggested constant for the localStorage key, use it here too for consistency.
// 可选：在完成时将状态保存到localStorage try { - localStorage.setItem(`project-completed-${chatId}`, 'true'); + localStorage.setItem(PROJECT_COMPLETED_KEY, 'true'); } catch (e) { // 忽略localStorage错误 }
372-396: Good implementation of the timer logicThe timer logic is well-implemented. It calculates progress based on elapsed time and ensures the progress never exceeds 99% (reserving 100% for completion).
One minor optimization: consider using a callback ref for the interval to avoid creating a new interval on each render.
useEffect(() => { let interval; if (timerActive) { interval = setInterval(() => { setEstimateTime((prevTime) => { if (prevTime <= 1) { return initialTime; } const elapsedTime = initialTime - prevTime + 1; const newProgress = Math.min( Math.floor((elapsedTime / initialTime) * 100), 99 ); setProgress(newProgress); return prevTime - 1; }); }, 1000); } return () => { if (interval) clearInterval(interval); }; - }, [timerActive]); + }, [timerActive, initialTime]);
414-478: Loading UI enhancements look greatThe loading UI has been significantly enhanced with:
- A progress bar showing completion percentage
- A success animation when the project is ready
- Different messages based on the loading state
These changes provide a much better user experience during project initialization.
The only minor issue is that the empty motion.p element at lines 471-477 doesn't seem to serve a purpose since it doesn't contain any text.
- {/* 添加不同阶段的消息 */} - <motion.p - initial={{ opacity: 0 }} - animate={{ opacity: 1 }} - exit={{ opacity: 0 }} - transition={{ delay: 0.2 }} - className="text-sm text-center max-w-xs text-muted-foreground" - ></motion.p> + {/* If you want to show stage messages, uncomment and add content: + <motion.p + initial={{ opacity: 0 }} + animate={{ opacity: 1 }} + exit={{ opacity: 0 }} + transition={{ delay: 0.2 }} + className="text-sm text-center max-w-xs text-muted-foreground" + > + {progress < 30 ? "Setting up environment..." : + progress < 60 ? "Loading dependencies..." : + progress < 90 ? "Preparing workspace..." : + progress === 100 ? "Ready to code!" : "Almost there..."} + </motion.p> + */}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/src/components/chat/code-engine/code-engine.tsx(5 hunks)
🔇 Additional comments (5)
frontend/src/components/chat/code-engine/code-engine.tsx (5)
70-73: Optimization to skip polling when project is completedGood optimization to skip the polling operation when the project is already completed. This reduces unnecessary network requests and improves performance.
Don't forget to add
projectCompletedto the dependency array of the useEffect hook, which you correctly did.Also applies to: 99-99
83-86: Project completion detection looks goodThe code correctly identifies when a project is successfully loaded by checking for the existence of
project.projectPathand updates the state accordingly.
317-333: Well-structured showLoader logicMoving the showLoader logic to a useMemo hook is a good refactoring choice. It properly considers the project completion state and will only recompute when its dependencies change.
398-402: Utility function for time formatting looks goodThe
formatTimefunction is well-implemented and properly formats seconds into a readable minutes:seconds format.
446-468: Progress bar implementation is well-doneThe progress bar implementation using motion.div for animations is excellent. It provides a smooth visual feedback to users during loading and changes color when complete.
Summary by CodeRabbit