mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-20 15:06:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

prevent Cumulative Layout Shift by fading in elements after initial translation is loaded

Browse source
This commit is contained in:
schlagmichdoch 2023-10-06 02:57:46 +02:00
parent faa2030f0b
commit 3c1ef57740
6 changed files with 103 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

4
public/scripts/network.js
View file

@ -220,7 +220,9 @@ class ServerConnection {
_onDisconnect() {
console.log('WS: server disconnected');
Events.fire('notify-user', Localization.getTranslation("notifications.connecting"));
setTimeout(() => {
Events.fire('notify-user', Localization.getTranslation("notifications.connecting"));
}, 100); //delay for 100ms to prevent flickering on page reload
clearTimeout(this._reconnectTimer);
this._reconnectTimer = setTimeout(_ => this._connect(), 1000);
Events.fire('ws-disconnected');

21
public/scripts/ui.js
View file

@ -36,9 +36,24 @@ class PeersUI {
Events.on('drop', e => this._onDrop(e));
Events.on('keydown', e => this._onKeyDown(e));
this.$header = document.querySelector('body > header')
this.$xPeers = $$('x-peers');
this.$xNoPeers = $$('x-no-peers');
this.$xInstructions = $$('x-instructions');
this.$center = $$('#center');
this.$logo = $$('footer .icon.logo');
this.$discoveryWrapper = $$('footer .discovery-wrapper');
this.$knownAsWrapper = $$('footer .known-as-wrapper');
this.$header.style.opacity = "1";
this.$xPeers.style.opacity = "1";
this.$xNoPeers.style.opacity = "1";
this.$xInstructions.style.opacity = "0.5";
this.$center.style.opacity = "1";
this.$logo.style.opacity = "1";
this.$discoveryWrapper.style.opacity = "1";
this.$knownAsWrapper.style.opacity = "1";
Events.on('peer-added', _ => this.evaluateOverflowing());
Events.on('bg-resize', _ => this.evaluateOverflowing());
@ -1009,7 +1024,7 @@ class ReceiveRequestDialog extends ReceiveDialog {
: Localization.getTranslation('document-titles.file-transfer-requested');
this.$receiveTitle.innerText = transferRequestTitle;
document.title = `${transferRequestTitle} - PairDrop`;
document.changeFavicon("images/favicon-96x96-notification.png");
this.show();
@ -2048,6 +2063,7 @@ class Notifications {
this.$button.removeAttribute('hidden');
this.$button.addEventListener('click', _ => this._requestPermission());
}
Events.on('text-received', e => this._messageNotification(e.detail.text, e.detail.peerId));
Events.on('files-received', e => this._downloadNotification(e.detail.files));
Events.on('files-transfer-request', e => this._requestNotification(e.detail.request, e.detail.peerId));
@ -2733,6 +2749,7 @@ Events.on('load', () => {
dw = Math.round(Math.max(w, h, 1000) / 13);
drawCircles(cCtx, dw);
c.style.opacity = "1";
}
Events.on('bg-resize', _ => init());
@ -2754,7 +2771,7 @@ Events.on('load', () => {
}
}
init();
setTimeout(_ => init(), 300);
});
document.changeFavicon = function (src) {