can not customize an image loading animation？

Decision Table

[X] My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
[X] My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

[X] I have read the HELP document here: https://git.io/JBi6R
[X] I have read the CONTRIBUTING document here: https://git.io/JJ0Pg
[X] I have confirmed that this bug has not been reported yet

Description

I want to customize an image loading animation. But I found that the loading state of the image in the custom method only calls the CustomImageRenderer method on success and error, so my custom loading image has no effect and doesn't show up.

this is my code


import CustomHeader from '@components/common/CustomHeader'
import * as React from 'react'
import { ScrollView, StyleSheet, useWindowDimensions, Image } from 'react-native'
import RenderHTML, {
  IMGElementContainer,
  IMGElementContentError,
  IMGElementContentSuccess,
  useIMGElementProps,
  useIMGElementState
} from 'react-native-render-html'

const html = `
<img border="0" src="https://pic1.zhimg.com/v2-95576fa33175dfd81e49c18bad4a6c37_r.jpg?source=172ae18b" alt="Pulpit rock" width="304" height="228">
`

function IMGElementContentLoading({ source, imageStyle, dimensions }): ReactElement {
  return (
    <Image
      source={require('../../assets/img/common/loading.png')}
      style={[{ resizeMode: 'cover', marginBottom: 5 }, dimensions, imageStyle]}
      testID="image-loading"
    />
  )
}
function CustomImageRenderer(props) {
  const imgElementProps = useIMGElementProps(props)
  const state = useIMGElementState(imgElementProps)
  let content: React.ReactNode = React.createElement(IMGElementContentLoading, state)
  console.log('loading-type', state.type)
  if (state.type === 'success') {
    content = React.createElement(IMGElementContentSuccess, state)
  } else if (state.type === 'loading') {
    content = React.createElement(IMGElementContentLoading, state)
  } else {
    content = React.createElement(IMGElementContentError, state)
  }

  return <IMGElementContainer style={state.containerStyle}>{content}</IMGElementContainer>
}
export default function App() {
  const { width } = useWindowDimensions()
  return (
    <ScrollView style={styles.container}>
      <CustomHeader title="RenderHTML" />
      <RenderHTML
        contentWidth={width}
        source={{ html }}
        renderers={{
          img: CustomImageRenderer
        }}
        tagsStyles={{
          a: {
            textDecorationLine: 'underline',
            color: '#1890ff',
            fontSize: 22,
            textDecorationColor: 'red'
          }
        }}
      />
    </ScrollView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
})

But when the internet is slow, or the image is large and takes a while to load, my custom loading image does not show up

React Native Information

"react": "16.13.1",
    "react-native": "0.63.4",
 "react-native-render-html": "^6.3.4",

RNRH Version

"react-native-render-html": "^6.3.4",

Tested Platforms

[X] Android
[X] iOS
[ ] Web
[ ] MacOS
[ ] Windows

Reproduction Platforms

[X] Android
[X] iOS
[ ] Web
[ ] MacOS
[ ] Windows

Minimal, Reproducible Example

https://snack.expo.dev/XkVCn9-yL

Additional Notes

No response

meliorence / react-native-render-html

can not customize an image loading animation？ #565