Removed rain drop animation references

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

@@ -20,81 +20,41 @@
 	text-align: center;
 }
 
-#loadingOverlayAnimation {
-	width: 100%;
-	height: 100%;
-	position: absolute;
+/* Loading spinner */
+.loading-spinner {
+	display: inline-block;
+	position: relative;
 }
 
-#dropContainer {
-	width: 100%;
-	height: 100%;
-	animation: rain 5s linear infinite;
+.loading-spinner div {
+	box-sizing: border-box;
+	display: block;
 	position: absolute;
+	margin: 12.5%;
+	border: 1px solid var(--color2);
+	border-radius: 50%;
+	animation: loading-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+	border-color: var(--color2) transparent transparent transparent;
 }
 
-/* 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;
+.loading-spinner div:nth-child(1) {
+	animation-delay: -0.45s;
+}
+
+.loading-spinner div:nth-child(2) {
+	animation-delay: -0.3s;
 }
 
-/* drop:nth-child(3n + 1) {
-	background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.5) 50%, var(--color9) 100%);
+.loading-spinner div:nth-child(3) {
+	animation-delay: -0.15s;
 }
-drop:nth-child(3n + 2) {
-	background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.5) 50%, var(--color10)  100%);
-} */
 
-@keyframes rain {
+@keyframes loading-spinner {
 	0% {
-		transform: translateY(-20%);
+		transform: rotate(0deg);
 	}
 
 	100% {
-		transform: translateY(calc(100% + 20%));
+		transform: rotate(360deg);
 	}
 }
-
-/* Loading spinner */
-.loading-spinner {
-  display: inline-block;
-  position: relative;
-}
-.loading-spinner div {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  margin: 12.5%;
-  border: 1px solid var(--color2);
-  border-radius: 50%;
-  animation: loading-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: var(--color2) transparent transparent transparent;
-}
-.loading-spinner div:nth-child(1) {
-  animation-delay: -0.45s;
-}
-.loading-spinner div:nth-child(2) {
-  animation-delay: -0.3s;
-}
-.loading-spinner div:nth-child(3) {
-  animation-delay: -0.15s;
-}
-@keyframes loading-spinner {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-#drophead {
-	background-color: var(--color11);
-	position: absolute;
-	top: 100%;
-}

library/src/LoadingOverlay.ts

@@ -1,11 +1,6 @@
 import { TextOverlay } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.4';
 
 export class LoadingOverlay extends TextOverlay {
-	maxDrops = 50;
-	maxSize = 5;
-	maxDuration = 5;
-	minDelay = -20;
-	rainDrops: Array<Raindrop> = [];
 
 	private static _rootElement: HTMLElement;
 	private static _textElement: HTMLElement;
@@ -66,46 +61,6 @@ export class LoadingOverlay extends TextOverlay {
 		super(parentElem, LoadingOverlay.rootElement(), LoadingOverlay.textElement());
 	}
 
-	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;
-	}
-
 	/**
 	 * Update the text overlays inner text 
 	 * @param text the update text to be inserted into the overlay 
@@ -122,12 +77,3 @@ export class LoadingOverlay extends TextOverlay {
 		}
 	}
 }
-
-class Raindrop {
-	size: number;
-	delay: number;
-	duration: number;
-	offsetLeft: number;
-	headsize: number;
-	element: HTMLElement;
-}

library/src/SPSApplication.ts

@@ -80,9 +80,6 @@ export class SPSApplication extends Application {
 		this.loadingOverlay.show();
 		this.loadingOverlay.update(signallingResp);
 
-		// disable rain animation for now as perf is too poor on mobile devices
-		// this.loadingOverlay.animate();
-
 		this.currentOverlay = this.loadingOverlay;
 	}