Remove unused code and styling related to LoadingOverlay

[lukehb]

Describe the bug
The loading overlay is mostly (perhaps nearly entirely?) unused. It should be removed or greatly trimmed. For example, it has a whole section about animating a rain drop.

See here:

Frontend/library/src/LoadingOverlay.ts

Lines 126 to 133 in bc4ebc4

	class Raindrop {
	size: number;
	delay: number;
	duration: number;
	offsetLeft: number;
	headsize: number;
	element: HTMLElement;
	}

Frontend/library/src/LoadingOverlay.ts

Lines 69 to 107 in bc4ebc4

	public animate() {
	// Update the existing drops to have an increased speed
	for (let raindrop of this.rainDrops) {
	raindrop.element.setAttribute("style", "animation-duration:" + (1 + Math.random() * this.maxDuration) + "s;")
	}
	let i = 0;
	while (i < this.maxDrops) {
	const dropContainer = document.createElement("div");
	dropContainer.id = "dropContainer";
	const raindrop = new Raindrop();
	raindrop.size = Math.random() * this.maxSize + 0.2;
	raindrop.delay = Math.random() * this.minDelay;
	raindrop.duration = Math.random() * this.maxDuration;
	raindrop.offsetLeft = Math.floor(Math.random() * LoadingOverlay.rootElement().clientWidth);
	raindrop.element = dropContainer;
	const drop = document.createElement("drop");
	drop.setAttribute("style", "left: " + raindrop.offsetLeft + "px; width:" + raindrop.size + "px; overflow: visible;");
	dropContainer.setAttribute("style", "animation-delay:" + raindrop.delay + "s; animation-duration:" + (1 + raindrop.duration) + "s;");
	const head = document.createElement("div");
	head.id = "drophead";
	raindrop.headsize = raindrop.size * 3;
	head.setAttribute("style", "left: -" + raindrop.size + "px; width:" + raindrop.headsize + "px; height: " + raindrop.headsize + "px;");
	drop.appendChild(head);
	dropContainer.appendChild(drop);
	LoadingOverlay.rootElement().append(dropContainer);
	this.rainDrops.push(raindrop);
	i++;
	}
	this.maxDrops /= 1.5
	this.maxDuration /= 1.5;
	}

Frontend/examples/typescript/src/assets/css/index.css

Lines 23 to 61 in bc4ebc4

	#loadingOverlayAnimation {
	width: 100%;
	height: 100%;
	position: absolute;
	}
	#dropContainer {
	width: 100%;
	height: 100%;
	animation: rain 5s linear infinite;
	position: absolute;
	}
	/* Rain drops */
	drop {
	position: absolute;
	height: 20%;
	background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.5) 50%, var(--color11) 100%);
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	overflow: hidden;
	}
	/* drop:nth-child(3n + 1) {
	background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.5) 50%, var(--color9) 100%);
	}
	drop:nth-child(3n + 2) {
	background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.5) 50%, var(--color10) 100%);
	} */
	@keyframes rain {
	0% {
	transform: translateY(-20%);
	}
	100% {
	transform: translateY(calc(100% + 20%));
	}
	}

Frontend/examples/typescript/src/assets/css/index.css

Lines 96 to 100 in bc4ebc4

	#drophead {
	background-color: var(--color11);
	position: absolute;
	top: 100%;
	}

Likely there is even more than this.

To Reproduce

1. Go to LoadingOverlay.ts and analyse unused code. (Maybe the whole overlay is unused?)
2. Go to index.css and analyse unused CSS.

Expected behavior
Only code/css that is relevant for the base library and examples should be used.

Additional context
As we move towards 1.0, little cleanups like this should occur before we ship.