Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-04 09:53:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

empty state & simple indicator animation

Browse source
This commit is contained in:
ameer2468 2024-06-11 23:33:58 +03:00
parent 80a379d202
commit 28818870d4
2 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/mobile/src/screens/settings/library/CloudSettings.tsx
View file

@ -1,6 +1,7 @@
import { CloudInstance, useLibraryContext, useLibraryMutation, useLibraryQuery } from '@sd/client';
import { FlatList, Text, View } from 'react-native';
import Card from '~/components/layout/Card';
import Empty from '~/components/layout/Empty';
import ScreenContainer from '~/components/layout/ScreenContainer';
import VirtualizedListWrapper from '~/components/layout/VirtualizedListWrapper';
import { Button } from '~/components/primitive/Button';
@ -122,6 +123,11 @@ const Authenticated = () => {
<FlatList
data={cloudInstances}
scrollEnabled={false}
ListEmptyComponent={<Empty
textStyle={tw`my-0`}
description='No instances found'
/>}
contentContainerStyle={twStyle(cloudInstances?.length === 0 && 'flex-row')}
showsHorizontalScrollIndicator={false}
ItemSeparatorComponent={() => <View style={tw`h-2`}/>}
renderItem={({ item }) => <Instance data={item} length={cloudInstances?.length ?? 0} />}

10
apps/mobile/src/screens/settings/library/SyncSettings.tsx
View file

@ -71,16 +71,16 @@ const SyncSettingsScreen = ({ navigation }: SettingsStackScreenProps<'SyncSettin
export default SyncSettingsScreen;
function OnlineIndicator({ online }: { online: boolean }) {
const size = 8;
const size = 6;
return (
<View style={tw`items-center justify-center w-6 h-6 p-2 mb-1 border rounded-full border-app-inputborder bg-app-input`}>
{online ? (
<View style={tw`relative items-center justify-center`}>
<MotiView
from={{ scale: 0 }}
animate={{ scale: 1.5, opacity: 0 }}
transition={{ type: 'timing', duration: 500, loop: true, delay: 500}}
style={tw`absolute z-10 items-center justify-center w-2 h-2 bg-red-500 rounded-full`} />
from={{ scale: 0, opacity: 1 }}
animate={{ scale: 3, opacity: 0}}
transition={{ type: 'timing', duration: 1500, loop: true, repeatReverse: false, delay: 1000}}
style={tw`absolute z-10 items-center justify-center w-2 h-2 bg-green-500 rounded-full`} />
<View style={tw`w-2 h-2 bg-green-500 rounded-full`} />
</View>
) : (