[PR #164] [MERGED] fix: add loading modal for container operations #246

New issue

Closed

opened 2026-02-26 12:40:44 +03:00 by kerem · 0 comments

kerem commented

2026-02-26 12:40:44 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/community-scripts/ProxmoxVE-Local/pull/164
Author: @michelroegl-brunner
Created: 10/16/2025
Status: ✅ Merged
Merged: 10/16/2025
Merged by: @michelroegl-brunner

Base: main ← Head: fix/show_modal_during_operation

📝 Commits (1)

962e287 feat: add loading modal for container operations

📊 Changes

2 files changed (+58 additions, -0 deletions)

View changed files

📝 src/app/_components/InstalledScriptsTab.tsx (+21 -0)
➕ src/app/_components/LoadingModal.tsx (+37 -0)

📄 Description

Summary

Add a loading modal with spinning circle that displays during start/stop/destroy container operations to provide clear visual feedback to users.

Changes

New LoadingModal component with full-screen overlay and spinning animation
Enhanced user experience during container operations with action-specific messages
Consistent modal styling matching existing ConfirmationModal and ErrorModal patterns

User Flow

User clicks start/stop/destroy → confirmation modal shows
User confirms → loading modal shows with spinning circle + action description
Operation completes → loading modal closes, success/error modal shows

Technical Details

Uses icon from lucide-react for spinning animation
Integrates with existing mutation handlers in InstalledScriptsTab
Shows descriptive messages like 'Starting container 101...', 'Destroying container 102...'
Automatically closes on operation completion (success or error)

Fixes the issue where users had no visual feedback during background operations.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/community-scripts/ProxmoxVE-Local/pull/164 **Author:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Created:** 10/16/2025 **Status:** ✅ Merged **Merged:** 10/16/2025 **Merged by:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Base:** `main` ← **Head:** `fix/show_modal_during_operation` --- ### 📝 Commits (1) - [`962e287`](https://github.com/community-scripts/ProxmoxVE-Local/commit/962e2877e33a3f8d19acba0e73c6260cf1f513a5) feat: add loading modal for container operations ### 📊 Changes **2 files changed** (+58 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `src/app/_components/InstalledScriptsTab.tsx` (+21 -0) ➕ `src/app/_components/LoadingModal.tsx` (+37 -0) </details> ### 📄 Description ## Summary Add a loading modal with spinning circle that displays during start/stop/destroy container operations to provide clear visual feedback to users. ## Changes - **New LoadingModal component** with full-screen overlay and spinning animation - **Enhanced user experience** during container operations with action-specific messages - **Consistent modal styling** matching existing ConfirmationModal and ErrorModal patterns ## User Flow 1. User clicks start/stop/destroy → confirmation modal shows 2. User confirms → **loading modal shows** with spinning circle + action description 3. Operation completes → loading modal closes, success/error modal shows ## Technical Details - Uses icon from lucide-react for spinning animation - Integrates with existing mutation handlers in InstalledScriptsTab - Shows descriptive messages like 'Starting container 101...', 'Destroying container 102...' - Automatically closes on operation completion (success or error) Fixes the issue where users had no visual feedback during background operations. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>