add a loading indicator on invite facade

This commit is contained in:
Andre Staltz 2021-04-06 11:43:42 +03:00
parent 08c8b0cced
commit ed4c50dcaf
No known key found for this signature in database
GPG Key ID: 9EDE23EA7E8A4890
4 changed files with 6 additions and 6 deletions

View File

@ -6,12 +6,14 @@ window.addEventListener('focus', () => {
hasFocus = true;
});
const waitingElem = document.getElementById('waiting');
const anchorElem = document.getElementById('join-room-uri');
anchorElem.onclick = function handleURI(ev) {
const ssbUri = ev.target.dataset.href;
const fallbackUrl = ev.target.dataset.hrefFallback;
waitingElem.classList.remove('hidden');
setTimeout(function () {
if (hasFocus) window.location = fallbackUrl;
}, 500);
}, 5000);
window.location = ssbUri;
};

View File

@ -88,6 +88,7 @@ InviteFacadeTitle = "Join Room"
InviteFacadeWelcome = "You have permission to become a member of this room because someone has shared this invite with you."
InviteFacadeInstruct = "To claim the invite, press the button below which will open a compatible SSB app, if it's installed."
InviteFacadeJoin = "Join this room"
InviteFacadeWaiting = "Opening SSB app"
InviteFacadeFallbackWelcome = "Are you new to SSB? It seems you don't have an SSB app capable of understanding that link. You can install one of these apps:"
InviteFacadeFallbackManyverse = "Install Manyverse"

View File

@ -8,11 +8,6 @@
href="https://manyver.se"
class="shadow rounded flex flex-row justify-center items-center px-4 h-8 text-gray-100 bg-purple-500 hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50"
>{{i18n "InviteFacadeFallbackManyverse"}}</a>
<a
href="https://manyver.se"
class="mt-8 sm:ml-4 sm:mt-0 shadow rounded flex flex-row justify-center items-center px-4 h-8 text-gray-100 bg-purple-500 hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50"
>Install Imaginary</a>
</div>
<hr class="mt-8 w-64 h-px bg-gray-200"></hr>

View File

@ -12,6 +12,8 @@
class="shadow rounded flex flex-row justify-center items-center mt-8 px-4 h-8 text-gray-100 bg-purple-500 hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50"
>{{i18n "InviteFacadeJoin"}}</a>
<p id="waiting" class="hidden mt-8 animate-pulse text-green-500">{{i18n "InviteFacadeWaiting"}}</p>
<hr class="mt-8 w-64 h-px bg-gray-200"></hr>
<span class="text-center mt-8">{{i18n "AuthWithSSBInstructQR"}}</span>