Dynamic component loading from a pathname in shallow routing

Describe the problem

When implementing shallow routing with modals in SvelteKit, we currently need to statically import page components:

https://svelte.dev/docs/kit/shallow-routing#Loading-data-for-a-route

<script>
  import { preloadData } from '$app/navigation';
  import Modal from "$lib/Modal.svelte"
  import PhotoPage from './[id]/+page.svelte'; // Static import required, could also be `await import(...)`

  const modalData = await preloadData(href); // I can get the data from href, but not the related `+page.svelte` component
</script>

{#if modalOpened}
  <Modal>
    <PhotoPage data={modalData} />
  </Modal>
{/if}

While preloadData() allows us to dynamically fetch route data, there's no equivalent for loading the page component itself. This becomes problematic when handling multiple shallow routes, as each +page.svelte component must be imported statically at build time.

Describe the proposed solution

I'd like to dynamically resolve page components at runtime, similar to how we fetch data:

const modalData = await preloadData(href);
const ModalComponent = await preloadPage(href);

This would simplify shallow routing implementations, especially when dealing with multiple potential routes that could be opened in a modal.

Alternatives considered

The signature of preloadCode could be changed to return the +page.svelte component

Importance

nice to have

Additional Information

No response

Start with the shallow-routing documentation, especially the Loading data for a route example, and trace the existing preloadData and preloadCode entry points. Determine how a pathname could resolve both route data and its page component, then document or test the behavior for multiple shallow modal routes.