temp

src/view/com/lists/ListCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
-import {AppBskyGraphDefs, AtUri, RichText} from '@atproto/api'
+import {AppBskyGraphDefs, AtUri, ModerationOpts, RichText} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -15,6 +15,8 @@ import {RichText as RichTextCom} from '#/components/RichText'
 import {Link} from '../util/Link'
 import {Text} from '../util/text/Text'
 import {UserAvatar} from '../util/UserAvatar'
+import * as Hider from '#/components/moderation/Hider'
+import {useModerationOpts} from 'state/preferences/moderation-opts'
 
 export const ListCard = ({
   testID,
@@ -23,6 +25,7 @@ export const ListCard = ({
   noBorder,
   renderButton,
   style,
+  moderationOpts,
 }: {
   testID?: string
   list: AppBskyGraphDefs.ListView
@@ -30,6 +33,7 @@ export const ListCard = ({
   noBorder?: boolean
   renderButton?: () => JSX.Element
   style?: StyleProp<ViewStyle>
+  moderationOpts: ModerationOpts
 }) => {
   const {_} = useLingui()
   const pal = usePalette('default')
@@ -42,6 +46,8 @@ export const ListCard = ({
   const isModList = list.purpose === 'app.bsky.graph.defs#modlist'
   const creatorHandle = sanitizeHandle(list.creator.handle, '@')
 
+  const moderation = moderationOpts.
+
   const rkey = React.useMemo(() => {
     try {
       const urip = new AtUri(list.uri)
@@ -62,6 +68,9 @@ export const ListCard = ({
   }, [list])
 
   return (
+    <Hider.Outer modui={moderation.modUi('content')}>
+
+    </Hider.Outer>
     <Link
       testID={testID}
       style={[

src/view/com/lists/MyLists.tsx

@@ -18,6 +18,7 @@ import {MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
+import {useModerationOpts} from 'state/preferences/moderation-opts'
 import {EmptyState} from 'view/com/util/EmptyState'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {List} from '../util/List'
@@ -43,6 +44,7 @@ export function MyLists({
   const pal = usePalette('default')
   const {track} = useAnalytics()
   const {_} = useLingui()
+  const moderationOpts = useModerationOpts()
   const [isPTRing, setIsPTRing] = React.useState(false)
   const {data, isFetching, isFetched, isError, error, refetch} =
     useMyListsQuery(filter)
@@ -53,7 +55,7 @@ export function MyLists({
     if (isError && isEmpty) {
       items = items.concat([ERROR_ITEM])
     }
-    if (!isFetched && isFetching) {
+    if ((!isFetched && isFetching) || !moderationOpts) {
       items = items.concat([LOADING])
     } else if (isEmpty) {
       items = items.concat([EMPTY])
@@ -61,7 +63,7 @@ export function MyLists({
       items = items.concat(data)
     }
     return items
-  }, [isError, isEmpty, isFetched, isFetching, data])
+  }, [isError, isEmpty, isFetched, isFetching, moderationOpts, data])
 
   // events
   // =
@@ -114,10 +116,13 @@ export function MyLists({
           list={item}
           testID={`list-${item.name}`}
           style={styles.item}
+          // If this component is being rendered, it means that `moderationOpts` is not undefined. Not going to refactor
+          // this for now since it might not be around forever. -h
+          moderationOpts={moderationOpts!}
         />
       )
     },
-    [error, onRefresh, renderItem, _],
+    [error, onRefresh, renderItem, moderationOpts, _],
   )
 
   if (inline) {