From b6d39910e5939872301623d727ce272391082732 Mon Sep 17 00:00:00 2001
From: mARTin <mail@martin-bierschenk.de>
Date: Wed, 25 Mar 2026 12:43:33 +0100
Subject: [PATCH] fix: animated dots on save button while creating events

Dots pulse sequentially (. . .) to give clear visual feedback
that the operation is still in progress.

v1.74.4

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 package.json                          |  2 +-
 src/components/CalendarEventModal.tsx | 24 ++++++++++++++++++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 3bb321d..a772660 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.74.3",
+  "version": "1.74.4",
   "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
   "main": "index.js",
   "scripts": {
diff --git a/src/components/CalendarEventModal.tsx b/src/components/CalendarEventModal.tsx
index e8bf6a7..7f4737c 100644
--- a/src/components/CalendarEventModal.tsx
+++ b/src/components/CalendarEventModal.tsx
@@ -6,6 +6,26 @@ import { faServer } from '@fortawesome/free-solid-svg-icons';
 
 const RichTextEditor = lazy(() => import('./RichTextEditor'));
 
+function AnimatedDots() {
+    return (
+        <span className="animated-dots">
+            <span className="dot">.</span><span className="dot">.</span><span className="dot">.</span>
+            <style>{`
+                .animated-dots .dot {
+                    animation: dotPulse 1.4s infinite;
+                    opacity: 0.2;
+                }
+                .animated-dots .dot:nth-child(2) { animation-delay: 0.2s; }
+                .animated-dots .dot:nth-child(3) { animation-delay: 0.4s; }
+                @keyframes dotPulse {
+                    0%, 80%, 100% { opacity: 0.2; }
+                    40% { opacity: 1; }
+                }
+            `}</style>
+        </span>
+    );
+}
+
 // Reminder preset options (minutes)
 const REMINDER_OPTIONS = [
     { label: 'None', value: -1 },
@@ -908,7 +928,7 @@ export default function CalendarEventModal({
                                 boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
                             }}
                         >
-                            {isSaving ? (language === 'de' ? 'Erstelle...' : 'Creating...') : (language === 'de' ? 'Speichern' : 'Save')}
+                            {isSaving ? <>{language === 'de' ? 'Erstelle' : 'Creating'}<AnimatedDots /></> : (language === 'de' ? 'Speichern' : 'Save')}
                         </button>
                     </div>
                 </div>
@@ -975,7 +995,7 @@ export default function CalendarEventModal({
                                 borderRadius: 8, cursor: 'pointer',
                                 opacity: isSaving ? 0.6 : 1,
                                 boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
-                            }}>{isSaving ? (language === 'de' ? 'Erstelle...' : 'Creating...') : (language === 'de' ? 'Speichern' : 'Save')}</button>
+                            }}>{isSaving ? <>{language === 'de' ? 'Erstelle' : 'Creating'}<AnimatedDots /></> : (language === 'de' ? 'Speichern' : 'Save')}</button>
                         </div>
                     </div>
                 </div>