diff --git a/public/room.html b/public/room.html
index bb54e9b9b67ee8fb37fade3f614b5aa809fe729b..ebf02d3dea9b320c1c1bdb50ff4f15ad7f118002 100644
--- a/public/room.html
+++ b/public/room.html
@@ -4,20 +4,30 @@
<title>Mozilla Mixed Reality Social Client</title>
<script src="./app.bundle.js"></script>
<style>
- .a-enter-vr {
- top: 90px;
- bottom: auto;
- }
+ .a-enter-vr {
+ top: 90px;
+ bottom: auto;
+ }
+ #loader {
+ position: fixed;
+ width: 100vw;
+ height: 100vh;
+ z-index: 10001;
+ background: #eaeaea no-repeat url(assets/loading.gif) center center;
+ opacity: 0.9;
+ }
</style>
</head>
<body>
+ <div id="loader"></div>
<a-scene
networked-scene="adapter: janus;
room: 2;
serverURL: wss://quander.me:8989;
audio: true;
debug: true;
+ onConnect: onConnect;
connectOnLoad: false;"
mute-mic="eventSrc: a-scene; toggleEvents: action_mute">
diff --git a/src/index.js b/src/index.js
index e7c77842e2eaffe5416bbfade6a2d621bb08553f..a7fa48d088d73c18128579a87bb7875bfdd433f8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -56,3 +56,7 @@ window.onSceneLoad = function() {
scene.components["networked-scene"].connect();
};
+
+window.onConnect = function() {
+ document.getElementById("loader").style.display = "none";
+};