ui: voeg laad-indicator toe aan Dashboard

src/screens/DashboardScreen.tsx

@@ -13,15 +13,18 @@ export default function DashboardScreen({ navigation }: Props) {
   const insets = useSafeAreaInsets()
   const [latest, setLatest] = useState<Measurement | null>(null)
   const [all, setAll] = useState<Measurement[]>([])
+  const [loading, setLoading] = useState(true)
 
   useFocusEffect(
     useCallback(() => {
       const load = async () => {
+        setLoading(true)
         await initDatabase()
         const allM = await getAllMeasurements()
         const visible = allM.filter(m => !m.deletedAt)
         setAll(visible)
         setLatest(visible.length > 0 ? visible[0] : null)
+        setLoading(false)
       }
       load()
     }, [])
@@ -38,8 +41,14 @@ export default function DashboardScreen({ navigation }: Props) {
         </TouchableOpacity>
       </View>
       <ScrollView style={styles.container}>
-        <LatestMeasurementCard measurement={latest} />
+        {loading ? (
-        <WeightChart measurements={all} />
+          <Text style={styles.loading}>Laden...</Text>
+        ) : (
+          <>
+            <LatestMeasurementCard measurement={latest} />
+            <WeightChart measurements={all} />
+          </>
+        )}
       </ScrollView>
 
       <TouchableOpacity
@@ -59,4 +68,5 @@ const styles = StyleSheet.create({
   navLink: { fontSize: 16, color: '#2196F3', fontWeight: '600' },
   fab: { backgroundColor: '#4CAF50', padding: 16, borderRadius: 8, margin: 16, alignItems: 'center' },
   fabText: { color: '#fff', fontSize: 16, fontWeight: '700' },
+  loading: { fontSize: 16, color: '#999', textAlign: 'center', padding: 40 },
 })