mARTin-B78/My-Weekly-ToDo-List
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: animated dots on save button while creating events

Browse Source 
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>
This commit is contained in:
mARTin 2026-03-25 12:43:33 +01:00
parent 2f973bf8af
commit b6d39910e5
2 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "my-weekly-todo-list", "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", "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

24
src/components/CalendarEventModal.tsx
View File

@ -6,6 +6,26 @@ import { faServer } from '@fortawesome/free-solid-svg-icons';
const RichTextEditor = lazy(() => import('./RichTextEditor')); 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) // Reminder preset options (minutes)
const REMINDER_OPTIONS = [ const REMINDER_OPTIONS = [
{ label: 'None', value: -1 }, { label: 'None', value: -1 },
@ -908,7 +928,7 @@ export default function CalendarEventModal({
boxShadow: '0 1px 3px rgba(0,0,0,0.1)', 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> </button>
</div> </div>
</div> </div>
@ -975,7 +995,7 @@ export default function CalendarEventModal({
borderRadius: 8, cursor: 'pointer', borderRadius: 8, cursor: 'pointer',
opacity: isSaving ? 0.6 : 1, opacity: isSaving ? 0.6 : 1,
boxShadow: '0 1px 3px rgba(0,0,0,0.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> </div>
</div> </div>