Add animation to content hider (#9812)

* add layout animation to contenthider

* add layout animation to posthider

src/components/moderation/ContentHider.tsx

@@ -1,5 +1,10 @@
-import React from 'react'
+import {useMemo, useState} from 'react'
-import {type StyleProp, View, type ViewStyle} from 'react-native'
+import {
+  LayoutAnimation,
+  type StyleProp,
+  View,
+  type ViewStyle,
+} from 'react-native'
 import {type ModerationUI} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -64,16 +69,17 @@ function ContentHiderActive({
   style,
   childContainerStyle,
   children,
-}: React.PropsWithChildren<{
+}: {
   testID?: string
   modui: ModerationUI
   style?: StyleProp<ViewStyle>
   childContainerStyle?: StyleProp<ViewStyle>
-}>) {
+  children?: React.ReactNode
+}) {
   const t = useTheme()
   const {_} = useLingui()
   const {gtMobile} = useBreakpoints()
-  const [override, setOverride] = React.useState(false)
+  const [override, setOverride] = useState(false)
   const control = useModerationDetailsDialogControl()
   const {labelDefs} = useLabelDefinitions()
   const globalLabelStrings = useGlobalLabelStrings()
@@ -81,7 +87,7 @@ function ContentHiderActive({
   const blur = modui?.blurs[0]
   const desc = useModerationCauseDescription(blur)
 
-  const labelName = React.useMemo(() => {
+  const labelName = useMemo(() => {
     if (!modui?.blurs || !blur) {
       return undefined
     }
@@ -150,6 +156,7 @@ function ContentHiderActive({
           e.preventDefault()
           e.stopPropagation()
           if (!modui.noOverride) {
+            LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
             setOverride(v => !v)
           } else {
             control.open()

src/components/moderation/PostHider.tsx

@@ -1,5 +1,6 @@
-import React, {type ComponentProps} from 'react'
+import {useCallback, useState} from 'react'
 import {
+  LayoutAnimation,
   Pressable,
   type StyleProp,
   StyleSheet,
@@ -17,7 +18,7 @@ import {useQueryClient} from '@tanstack/react-query'
 
 import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
 import {addStyle} from '#/lib/styles'
-import {precacheProfile} from '#/state/queries/profile'
+import {unstableCacheProfileView} from '#/state/queries/unstable-profile-cache'
 // import {Link} from '#/components/Link' TODO this imposes some styles that screw things up
 import {Link} from '#/view/com/util/Link'
 import {atoms as a, useTheme} from '#/alf'
@@ -27,7 +28,7 @@ import {
 } from '#/components/moderation/ModerationDetailsDialog'
 import {Text} from '#/components/Typography'
 
-interface Props extends ComponentProps<typeof Link> {
+interface Props extends React.ComponentProps<typeof Link> {
   disabled: boolean
   iconSize: number
   iconStyles: StyleProp<ViewStyle>
@@ -54,15 +55,15 @@ export function PostHider({
   const queryClient = useQueryClient()
   const t = useTheme()
   const {_} = useLingui()
-  const [override, setOverride] = React.useState(false)
+  const [override, setOverride] = useState(false)
   const control = useModerationDetailsDialogControl()
   const blur =
     modui.blurs[0] ||
     (interpretFilterAsBlur ? getBlurrableFilter(modui) : undefined)
   const desc = useModerationCauseDescription(blur)
 
-  const onBeforePress = React.useCallback(() => {
+  const onBeforePress = useCallback(() => {
-    precacheProfile(queryClient, profile)
+    unstableCacheProfileView(queryClient, profile)
   }, [queryClient, profile])
 
   if (!blur || (disabled && !modui.noOverride)) {
@@ -83,14 +84,15 @@ export function PostHider({
     <Pressable
       onPress={() => {
         if (!modui.noOverride) {
+          LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
           setOverride(v => !v)
         }
       }}
       accessibilityRole="button"
-      accessibilityHint={
+      accessibilityLabel={
         override ? _(msg`Hides the content`) : _(msg`Shows the content`)
       }
-      accessibilityLabel=""
+      accessibilityHint=""
       style={[
         a.flex_row,
         a.align_center,