added notification to empty book notes otherwise they look suspiciously empty

src/public/javascripts/services/note_detail_book.js

@@ -43,6 +43,7 @@ class NoteDetailBook {
         this.$zoomInButton = this.$component.find('.book-zoom-in-button');
         this.$zoomOutButton = this.$component.find('.book-zoom-out-button');
         this.$expandChildrenButton = this.$component.find('.expand-children-button');
+        this.$help = this.$component.find('.note-detail-book-help');
 
         this.$zoomInButton.on('click', () => this.setZoom(this.zoomLevel - 1));
         this.$zoomOutButton.on('click', () => this.setZoom(this.zoomLevel + 1));
@@ -105,6 +106,7 @@ class NoteDetailBook {
 
     async render() {
         this.$content.empty();
+        this.$help.hide();
 
         if (this.isAutoBook()) {
             const $addTextLink = $('<a href="javascript:">here</a>').on('click', () => {
@@ -124,7 +126,9 @@ class NoteDetailBook {
     }
 
     async renderIntoElement(note, $container) {
-        for (const childNote of await note.getChildNotes()) {
+        const childNotes = await note.getChildNotes();
+
+        for (const childNote of childNotes) {
             const childNotePath = this.ctx.notePath + '/' + childNote.noteId;
 
             const {type, renderedContent} = await noteContentRenderer.getRenderedContent(childNote);
@@ -152,6 +156,10 @@ class NoteDetailBook {
 
             $container.append($card);
         }
+
+        if (childNotes.length === 0) {
+            this.$help.show();
+        }
     }
 
     /** @return {boolean} true if this is "auto book" activated (empty text note) and not explicit book note */

src/public/stylesheets/style.css

@@ -594,7 +594,7 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
     padding: 10px;
 }
 
-.note-detail-render-help {
+.note-detail-render-help, .note-detail-book-help {
     margin: 50px;
     padding: 20px;
 }
@@ -971,4 +971,10 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
 
 .include-note.ck-placeholder::before { /* remove placeholder in otherwise empty note */
     content: '' !important;
+}
+
+.alert-warning {
+    color: var(--main-text-color) !important;
+    background-color: var(--accented-background-color) !important;
+    border-color: var(--main-border-color) !important;
 }

src/services/task_context.js

@@ -14,6 +14,12 @@ class TaskContext {
         // progressCount is meant to represent just some progress - to indicate the task is not stuck
         this.progressCount = 0;
         this.lastSentCountTs = Date.now();
+
+        // just the fact this has been initialized is a progress which should be sent to clients
+        // this is esp. important when importing big files/images which take long time to upload/process
+        // which means that first "real" increaseProgressCount() will be called quite late and user is without
+        // feedback until then
+        this.increaseProgressCount();
     }
 
     /** @return {TaskContext} */

src/views/details/book.ejs

@@ -13,5 +13,9 @@
                 title="Zoom Out"></button>
     </div>
 
+    <div class="note-detail-book-help alert alert-warning">
+        This note of type Book doesn't have any child notes so there's nothing to display. See <a href="https://github.com/zadam/trilium/wiki/Book-note">wiki</a> for details.
+    </div>
+
     <div class="note-detail-book-content"></div>
 </div>