mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-17 11:49:39 +02:00

Till-JS e7f5f942f3 chore: initial commit - consolidate 4 projects into monorepo

Projects included:
- maerchenzauber (NestJS backend + Expo mobile + SvelteKit web + Astro landing)
- manacore (Expo mobile + SvelteKit web + Astro landing)
- manadeck (NestJS backend + Expo mobile + SvelteKit web)
- memoro (Expo mobile + SvelteKit web + Astro landing)

This commit preserves the current state before monorepo restructuring.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-11-22 23:38:24 +01:00

3.3 KiB

Raw Blame History

Loading Animations Update

✅ Was wurde geändert

Die schwere Lottie-Animation wurde durch leichtgewichtige, native React Native Animationen ersetzt.

Neue Animationskomponenten

Alle neuen Komponenten befinden sich in components/molecules/:

LogoSpinnerAnimation - Logo mit rotierendem Ring (⭐ Hauptanimation)
PulsingLogoAnimation - Pulsierendes Logo
SpinnerAnimation - Einfacher rotierender Spinner
DotsAnimation - Drei pulsierende Punkte

Aktualisierte Dateien

✏️ `components/LoadingScreen.tsx`

Vorher: LottieAnimation (12KB JSON + Library)
Nachher: LogoSpinnerAnimation
Verwendung: App-weiter Ladebildschirm (Auth, Initial Load)

// Neu:
import { LogoSpinnerAnimation } from './molecules/LogoSpinnerAnimation';

<LogoSpinnerAnimation size={150} />

✏️ `components/atoms/LoadingOverlay.tsx`

Vorher: ActivityIndicator
Nachher: SpinnerAnimation
Verwendung: Modales Loading (Translationen, Memory-Erstellung, etc.)

// Neu:
import { SpinnerAnimation } from '../molecules/SpinnerAnimation';

<SpinnerAnimation size={spinnerSize} />

📊 Vorteile

✅ Kleiner: Kein 12KB JSON + keine externe Library mehr nötig
✅ Schneller: Native Animationen laufen auf UI Thread
✅ Customizable: Farben passen sich automatisch an Theme an
✅ Minimalistischer: Weniger ablenkend, fokussierter
✅ Branded: Nutzt MemoroLogo statt generischer Lock-Animation

🧪 Testen

Alle Animationen können getestet werden mit:

import LoadingAnimationDemo from '~/components/LoadingAnimationDemo';

<LoadingAnimationDemo />

🗑️ Optional: Lottie entfernen

Falls die Lottie-Animation nirgendwo anders verwendet wird, kannst du die Dependency entfernen:

1. Prüfe ob Lottie noch verwendet wird:

grep -r "lottie-react-native" apps/mobile --exclude-dir=node_modules
grep -r "LottieAnimation" apps/mobile --exclude-dir=node_modules
grep -r "loading.json" apps/mobile --exclude-dir=node_modules

2. Falls nicht mehr verwendet, entfernen:

# Package entfernen
npm uninstall lottie-react-native

# Dateien löschen
rm apps/mobile/components/molecules/LottieAnimation.tsx
rm apps/mobile/assets/animations/loading.json

3. Rebuild:

npx expo prebuild --clean

🎨 Anpassungen

Alle Animationen unterstützen folgende Props:

interface AnimationProps {
  size?: number;           // Größe der Animation
  style?: ViewStyle;       // Custom Styles
  color?: string;          // Überschreibt Theme-Farbe
}

// Beispiel:
<LogoSpinnerAnimation
  size={120}
  color="#FFD700"
  style={{ marginTop: 20 }}
/>

📝 Weitere Verwendung

Die neuen Komponenten können überall verwendet werden:

// In Listen beim Laden
<SpinnerAnimation size={40} />

// Bei Buttons
<DotsAnimation size={30} />

// Für wichtige Prozesse
<LogoSpinnerAnimation size={100} />

// Für subtile Inline-Loading
<PulsingLogoAnimation size={24} />

🔄 Rollback (falls nötig)

Falls du zur alten Lottie-Animation zurück willst:

// In LoadingScreen.tsx:
import { LottieAnimation } from './molecules/LottieAnimation';

<LottieAnimation
  source={require('~/assets/animations/loading.json')}
  style={{ width: 200, height: 200 }}
  autoPlay
  loop
/>

3.3 KiB Raw Blame History