improve loading of channels

This commit is contained in:
MathMan05 2024-08-17 20:57:08 -05:00
parent 9e9ebb506b
commit 032e1b5be6
12 changed files with 276 additions and 100 deletions

View file

@ -149,7 +149,6 @@ class Channel {
});
}
setUpInfiniteScroller() {
const ids = {};
this.infinite = new InfiniteScroller(async function (id, offset) {
const snowflake = SnowFlake.getSnowFlakeFromID(id, Message);
if (offset === 1) {
@ -174,24 +173,28 @@ class Channel {
}
}
}.bind(this), async function (id) {
let res;
const promise = new Promise(_ => { res = _; });
//await new Promise(_=>{setTimeout(_,Math.random()*10)})
const snowflake = SnowFlake.getSnowFlakeFromID(id, Message);
if (!snowflake.getObject()) {
await this.grabArround(id);
//await this.grabArround(id);
console.error("Uh...");
}
try {
const html = snowflake.getObject().buildhtml(this.messageids.get(this.idToPrev.get(snowflake)));
return html;
}
catch (e) {
console.error(e);
}
const html = snowflake.getObject().buildhtml(this.messageids.get(this.idToPrev.get(snowflake)), promise);
ids[id] = res;
return html;
}.bind(this), async function (id) {
if (ids[id]) {
ids[id]();
delete ids[id];
return true;
const message = SnowFlake.getSnowFlakeFromID(id, Message).getObject();
try {
message.deleteDiv();
}
else {
return true;
catch (e) {
console.error(e);
}
finally { }
}.bind(this), this.readbottom.bind(this));
}
constructor(json, owner) {
@ -620,6 +623,9 @@ class Channel {
const prom = this.infinite.delete();
history.pushState(null, null, "/channels/" + this.guild_id + "/" + this.snowflake);
document.getElementById("channelname").textContent = "#" + this.name;
const loading = document.getElementById("loadingdiv");
Channel.regenLoadingMessages();
loading.classList.add("loading");
await this.putmessages();
await prom;
if (id !== Channel.genid) {
@ -627,15 +633,41 @@ class Channel {
}
this.makereplybox();
await this.buildmessages();
//loading.classList.remove("loading");
console.log(this);
document.getElementById("typebox").contentEditable = "" + this.canMessage;
}
static regenLoadingMessages() {
const loading = document.getElementById("loadingdiv");
loading.innerHTML = "";
for (let i = 0; i < 15; i++) {
const div = document.createElement("div");
div.classList.add("loadingmessage");
if (Math.random() < .5) {
const pfp = document.createElement("div");
pfp.classList.add("loadingpfp");
const username = document.createElement("div");
username.style.width = Math.floor(Math.random() * 96 * 1.5 + 40) + "px";
username.classList.add("loadingcontent");
div.append(pfp, username);
}
const content = document.createElement("div");
content.style.width = Math.floor(Math.random() * 96 * 3 + 40) + "px";
content.style.height = Math.floor(Math.random() * 3 + 1) * 20 + "px";
content.classList.add("loadingcontent");
div.append(content);
loading.append(div);
}
}
lastmessage;
async putmessages() {
if (this.allthewayup) {
return;
}
;
if (this.lastreadmessageid && this.lastreadmessageid.getObject()) {
return;
}
const j = await fetch(this.info.api + "/channels/" + this.snowflake + "/messages?limit=100", {
headers: this.headers,
});
@ -764,8 +796,11 @@ class Channel {
async tryfocusinfinate() {
if (this.infinitefocus)
return;
this.infinitefocus = true;
const messages = document.getElementById("channelw");
messages.innerHTML = "";
const loading = document.getElementById("loadingdiv");
const removetitle = document.getElementById("removetitle");
//messages.innerHTML="";
let id;
if (this.lastreadmessageid && this.lastreadmessageid.getObject()) {
id = this.lastreadmessageid;
@ -774,31 +809,36 @@ class Channel {
}
else if (this.lastmessage && this.lastmessage.snowflake) {
id = this.goBackIds(this.lastmessage.snowflake, 50);
console.log("shouldn't");
}
if (!id) {
const title = document.createElement("h2");
title.textContent = "No messages appear to be here, be the first to say something!";
title.classList.add("titlespace");
messages.append(title);
if (removetitle) {
const title = document.createElement("h2");
title.id = "removetitle";
title.textContent = "No messages appear to be here, be the first to say something!";
title.classList.add("titlespace");
messages.append(title);
}
this.infinitefocus = false;
loading.classList.remove("loading");
return;
}
messages.innerHTML = "";
else if (removetitle) {
removetitle.remove();
}
messages.append(await this.infinite.getDiv(id.id));
this.infinite.updatestuff();
this.infinite.watchForChange().then(async (_) => {
await new Promise(resolve => setTimeout(resolve, 0));
//await new Promise(resolve => setTimeout(resolve, 0));
this.infinite.focus(id.id, false); //if someone could figure out how to make this work correctly without this, that's be great :P
loading.classList.remove("loading");
});
this.infinite.focus(id.id, false);
this.infinitefocus = true;
//this.infinite.focus(id.id,false);
}
goBackIds(id, back, returnifnotexistant = true) {
while (back !== 0) {
const nextid = this.idToPrev.get(id);
if (nextid) {
id = nextid;
console.log(id);
back--;
}
else {
@ -898,7 +938,6 @@ class Channel {
if (replyjson) {
body.message_reference = replyjson;
}
console.log(body);
return await fetch(this.info.api + "/channels/" + this.snowflake + "/messages", {
method: "POST",
headers: this.headers,
@ -917,7 +956,6 @@ class Channel {
}
formData.append('payload_json', JSON.stringify(body));
for (const i in attachments) {
console.log(attachments[i]);
formData.append("files[" + i + "]", attachments[i]);
}
return await fetch(this.info.api + "/channels/" + this.snowflake + "/messages", {