How to prevent clicking and button presses to make modal disappear?

[JoelSatkas]

I am trying to use a modal as a kind of loading icon spinner to be displayed when requesting information from the server that is to overlay the entire screen and prevent clicking from happening. Currently doing a simple modal like so:

LoadingModal.svelte

<script lang="ts">
	import { ProgressRadial } from "@skeletonlabs/skeleton";
</script>

<div>
	<ProgressRadial />
</div>

Page using it:

import {
Modal,
getModalStore,
initializeStores,
type ModalSettings,
} from "@skeletonlabs/skeleton";

const modalStore = getModalStore();
const loadingModal: ModalSettings = {
type: "component",
component: {
	ref: LoadingModal,
},
};

onMount(() => {
		modalStore.trigger(loadingModal);
		serverRequest()
			.then(() => {
				modalStore.close();
			});
	});

This is working but if i click anywhere on the screen or press the escape key for example, the modal is gone. I know it is somehow possible to prevent clicking from making it disappear as shown in this example
Although it is not clear how that is achieved. But i would also like to prevent keyboard presses from making it disappear also.

Does anyone know if this is possible?

[Sarenor]

Not with Skeleton, I' afraid: https://www.skeleton.dev/utilities/modals#accessibility

Skeleton does not provide a means to disable the backdrop's click to close feature, as this would be harmful to accessibility. View the ARIA APG guidelines to learn more about modal accessibility.

You'll have to implement your own take on modals if you want to do this.