[v9] fix(useLoader): localize url caching per loader

[CodyJasonBennett]

Follow-up to #3131 as per #3151 (comment). Related: mrdoob/three.js#27301.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 97c969f:

Sandbox	Source
example	Configuration

[CodyJasonBennett]

Related: #3181

[DennisSmolek]

The items in this PR were merged in v9 it seems, reopen if im wrong but the code mentioned is in the codebase already

[DennisSmolek]

Whoops. I mesread the memoizedLoaders as the memoized results. reopened

[DennisSmolek]

So I've gone a different way with this.
Suspend-react already has a cache (So does Three) this adds another cache of the response and a lot of our own overhead/handling.
Krispy also mentioned a different Cache setup.. I think if we want to enhance the cache we need to leverage the three cache, enhance suspend-react (we own that repo too) or drop it in favor of a more significant cache setup of our own.

In the meantime, to solve the key issue instead of passing the array of URLs to a single loadingFn/preload setup, I do the loop in the preload phase. (clear as well)

/**
 * Preloads an asset into cache as a side-effect.
 */
useLoader.preload = function <I extends InputLike, L extends LoaderLike | ConstructorRepresentation<LoaderLike>>(
  loader: L,
  input: I,
  extensions?: Extensions<L>,
): void {
  const keys = (Array.isArray(input) ? input : [input]) as string[]
  // Preload each key individually so cache keys match useLoader calls
  keys.forEach((key) => preload(loadingFn(extensions), [loader, key]))
}

This passes the exact key/pair to suspend-react so:

useLoader.preload(gltfLoader, [URL_A, URL_B])

function ComponentA() {
  const gltf = useLoader(gltfLoader, URL_A)
}

Now the pair [gltfLoader, URL_A] is the correct key and loads as expected.

I've also added a test for this usecase

See in v10