UI improvements

This commit is contained in:
RMidhunSuresh 2022-08-04 16:37:28 +05:30
parent b1fd5f1ad5
commit d01a95aae3
3 changed files with 31 additions and 5 deletions

View file

@ -111,8 +111,11 @@ export class GapTile extends SimpleTile {
get error() {
if (this._error) {
if (this._error instanceof ConnectionError) {
return { message: "Waiting for reconnection", showSpinner: true };
}
const dir = this._entry.prev_batch ? "previous" : "next";
return `Could not load ${dir} messages: ${this._error.message}`;
return { message: `Could not load ${dir} messages: ${this._error.message}`, showSpinner: false };
}
return null;
}

View file

@ -422,3 +422,12 @@ only loads when the top comes into view*/
.GapView.isAtTop {
padding: 52px 20px 12px 20px;
}
.GapView__container {
display: flex;
align-items: center;
}
.GapView__container .spinner {
margin-right: 10px;
}

View file

@ -30,9 +30,23 @@ export class GapView extends TemplateView {
isAtTop: vm => vm.isAtTop,
};
return t.li({ className }, [
spinner(t),
t.div(vm => vm.isLoading ? vm.i18n`Loading more messages …` : vm.i18n`Not loading!`),
t.if(vm => vm.error, t => t.strong(vm => vm.error))
t.map(vm => vm.error,
(error, t, vm) => {
let elements;
if (error) {
elements = [t.strong(() => error.message)];
if (error.showSpinner) {
elements.unshift(spinner(t));
}
}
else if (vm.isLoading) {
elements = [spinner(t), t.span(vm.i18n`Loading more messages …`)];
}
else {
elements = t.span(vm.i18n`Not loading!`);
}
return t.div({ className: "GapView__container" }, elements);
})
]);
}