SVG images do not fire onLoad events

Problem Description

Image.onLoad callback is not fired for local SVG images.

FWIW, this seems to be related to https://github.com/microsoft/react-native-windows/pull/11009.
Most likely a race condition with the additional call to SetBackground(false) in ReactImage::ArrangeOverride. The SVG has not finished loading from the initial SetBackground(true) call when the source was set.

As a quick fix I have been using a loading flag and calling SetBackground(m_loading) from ArrangeOverride.

Steps To Reproduce

1. Add on onLoad callback prop to an Image component, i.e. onLoad={() => console.log('onLoad')}
2. Use an svg source, i.e. source={require('./assets/arrow.svg')}

Expected Results

onLoad callback is fired when image finishes loading.

CLI version

11.3.5

Environment

System:
  OS: Windows 10 10.0.19045
  CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
  Memory: 13.35 GB / 31.94 GB
Binaries:
  Node:
    version: 18.17.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: C:\Program Files\nodejs\yarn.CMD
  npm:
    version: 9.6.7
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.18362.0
      - 10.0.19041.0
      - 10.0.22000.0
      - 10.0.22621.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.7.33808.371 (Visual Studio Professional 2022)
    - 17.6.33815.320 (Visual Studio Professional 2022)
    - 16.11.32901.82 (Visual Studio Professional 2019)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.3
    wanted: 0.72.3
  react-native-windows:
    installed: 0.72.5
    wanted: 0.72.5
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Target Platform Version

10.0.19041

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2022

Build Configuration

Debug

Snack, code example, screenshot, or link to a repository

import React from 'react';
import {Image, SafeAreaView, StyleSheet} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';

function App(): JSX.Element {
  return (
    <SafeAreaView style={styles.root}>
      <Image
        style={styles.image}
        source={require('./assets/arrow.svg')}
        onLoad={() => console.log('onLoad')}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: Colors.darker,
  },
  image: {
    width: 512,
    height: 512,
  },
});

export default App;