diff --git a/src/view/com/lists/ListsList.tsx b/src/view/com/lists/ListsList.tsx
index 2b6f74c2b8..fb07ee0b88 100644
--- a/src/view/com/lists/ListsList.tsx
+++ b/src/view/com/lists/ListsList.tsx
@@ -1,6 +1,5 @@
import React, {MutableRefObject} from 'react'
import {
- ActivityIndicator,
RefreshControl,
StyleProp,
StyleSheet,
@@ -166,18 +165,6 @@ export const ListsList = observer(
],
)
- const Footer = React.useCallback(
- () =>
- listsList.isLoading ? (
-
-
-
- ) : (
-
- ),
- [listsList],
- )
-
return (
{data.length > 0 && (
@@ -187,7 +174,6 @@ export const ListsList = observer(
data={data}
keyExtractor={item => item._reactKey}
renderItem={renderItemInner}
- ListFooterComponent={Footer}
refreshControl={
([])
const [selected, setSelected] = React.useState([])
+ const [membershipsLoaded, setMembershipsLoaded] = React.useState(false)
const listsList: ListsListModel = React.useMemo(
() => new ListsListModel(store, store.me.did),
@@ -58,12 +59,13 @@ export const Component = observer(
const ids = memberships.memberships.map(m => m.value.list)
setOriginalSelections(ids)
setSelected(ids)
+ setMembershipsLoaded(true)
},
err => {
store.log.error('Failed to fetch memberships', {err})
},
)
- }, [memberships, listsList, store, setSelected])
+ }, [memberships, listsList, store, setSelected, setMembershipsLoaded])
const onPressCancel = useCallback(() => {
store.shell.closeModal()
@@ -107,11 +109,16 @@ export const Component = observer(
return (
onToggleSelected(list.uri)}>
@@ -132,23 +139,33 @@ export const Component = observer(
: sanitizeHandle(list.creator.handle, '@')}
-
- {isSelected && (
-
- )}
-
+ {membershipsLoaded && (
+
+ {isSelected && (
+
+ )}
+
+ )}
)
},
- [pal, palPrimary, palInverted, onToggleSelected, selected, store.me.did],
+ [
+ pal,
+ palPrimary,
+ palInverted,
+ onToggleSelected,
+ selected,
+ store.me.did,
+ membershipsLoaded,
+ ],
)
const renderEmptyState = React.useCallback(() => {
@@ -200,6 +217,12 @@ export const Component = observer(
label="Save Changes"
/>
)}
+
+ {(listsList.isLoading || !membershipsLoaded) && (
+
+
+
+ )}
)
@@ -221,6 +244,7 @@ const styles = StyleSheet.create({
borderTopWidth: 1,
},
btns: {
+ position: 'relative',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
@@ -263,4 +287,11 @@ const styles = StyleSheet.create({
borderRadius: 6,
marginRight: 8,
},
+ loadingContainer: {
+ position: 'absolute',
+ top: 10,
+ right: 0,
+ bottom: 0,
+ justifyContent: 'center',
+ },
})