diff --git a/src/ui/web/css/timeline.css b/src/ui/web/css/timeline.css index 69e96e58..4b7f572d 100644 --- a/src/ui/web/css/timeline.css +++ b/src/ui/web/css/timeline.css @@ -67,3 +67,18 @@ limitations under the License. display: flex; align-items: center; } + +.GapView { + visibility: hidden; + display: flex; + padding: 10px 20px; +} + +.GapView.isLoading { + visibility: visible; +} + +.GapView > div { + flex: 1; + margin-left: 10px; +} diff --git a/src/ui/web/session/room/timeline/GapView.js b/src/ui/web/session/room/timeline/GapView.js index b26ee83d..2b23ae3c 100644 --- a/src/ui/web/session/room/timeline/GapView.js +++ b/src/ui/web/session/room/timeline/GapView.js @@ -15,6 +15,7 @@ limitations under the License. */ import {TemplateView} from "../../../general/TemplateView.js"; +import {spinner} from "../../../common.js"; export class GapView extends TemplateView { render(t, vm) { @@ -22,12 +23,9 @@ export class GapView extends TemplateView { GapView: true, isLoading: vm => vm.isLoading }; - const label = (vm.isUp ? "🠝" : "🠟") + " fill gap"; //no binding return t.li({className}, [ - t.button({ - onClick: () => vm.fill(), - disabled: vm => vm.isLoading - }, label), + spinner(t), + t.div(vm.i18n`Loading more messages …`), t.if(vm => vm.error, t.createTemplate(t => t.strong(vm => vm.error))) ]); }