Added loader to Publish and update article meta process

components.js

@@ -1457,12 +1457,11 @@ spinner.innerHTML = `
 }
 :host{
     --accent-color: #4d2588;
-    --height: 1.6rem;
+    --size: 1.6rem;
-    --width: 1.6rem;
 }
 .loader {
-    height: var(--height);
+    height: var(--size);
-    width: var(--weight);
+    width: var(--size);
     stroke-width: 8;
     overflow: visible;
     stroke: var(--accent-color);

css/main.css

@@ -119,8 +119,9 @@ button,
 
 .cta {
   text-transform: uppercase;
-  font-size: 0.75rem;
+  font-size: 0.8rem;
   font-weight: 700;
+  letter-spacing: 0.05em;
 }
 
 .icon-only {
@@ -160,14 +161,16 @@ sm-button[variant=primary] .icon {
 sm-button[disabled] .icon {
   fill: rgba(var(--text-color), 0.6);
 }
-sm-button.uppercase {
-  letter-spacing: 0.05em;
-}
 sm-button.danger {
   --background: var(--danger-color);
   color: rgba(var(--background-color), 1);
 }
 
+sm-spinner {
+  --size: 1rem;
+  --stroke-width: 0.1rem;
+}
+
 ul {
   list-style: none;
 }

css/main.scss

@@ -116,8 +116,9 @@ button,
 }
 .cta {
   text-transform: uppercase;
-  font-size: 0.75rem;
+  font-size: 0.8rem;
   font-weight: 700;
+  letter-spacing: 0.05em;
 }
 .icon-only {
   padding: 0.5rem;
@@ -151,14 +152,15 @@ sm-button {
       fill: rgba(var(--text-color), 0.6);
     }
   }
-  &.uppercase {
-    letter-spacing: 0.05em;
-  }
   &.danger {
     --background: var(--danger-color);
     color: rgba(var(--background-color), 1);
   }
 }
+sm-spinner {
+  --size: 1rem;
+  --stroke-width: 0.1rem;
+}
 ul {
   list-style: none;
 }

index.html

@@ -460,7 +460,7 @@
                     <fieldset id="edit_category"></fieldset>
                 </div>
                 <label class="grid gap-0-5">
-                    <h5>Hero image URL</h5>
+                    <h5>Hero Image</h5>
                     <img src="" alt="" id="preview_image">
                     <input id="select_image" type="file" accept="image">
                 </label>
@@ -482,8 +482,10 @@
                     <h5>Publishing date</h5>
                     <input type="datetime-local" id="edit_published">
                 </label>
-                <sm-button id="set_article_meta" class="cta" onclick="defineArticle()" variant="primary">Save
+                <div class="flex align-center w-100">
-                </sm-button>
+                    <button id="set_article_meta" class="button button--primary cta w-100"
+                        onclick="defineArticle()">Save</button>
+                </div>
             </div>
         </section>
     </sm-popup>
@@ -1934,13 +1936,46 @@
             getRef('edit_category').append(frag)
         }
 
+
+        function showLoader(loadingText) {
+            const animOptions = {
+                fill: 'forwards',
+                duration: 150,
+                ease: 'easing',
+            }
+            animateTo(getRef('set_article_meta'), slideOutUp, animOptions)
+                .onfinish = () => {
+                    getRef('set_article_meta').disabled = true
+                    getRef('set_article_meta').classList.add('hide')
+                    const loader = createElement('div', {
+                        className: 'flex align-center justify-center gap-0-5 cta w-100',
+                        innerHTML: `<sm-spinner></sm-spinner> ${loadingText}`
+                    })
+                    getRef('set_article_meta').after(loader)
+                    animateTo(loader, slideInUp, animOptions)
+                }
+        }
+        function hideLoader(loadingText) {
+            const animOptions = {
+                fill: 'forwards',
+                duration: 150,
+                ease: 'easing',
+            }
+            animateTo(getRef('set_article_meta').nextElementSibling, slideOutUp, animOptions)
+                .onfinish = () => {
+                    getRef('set_article_meta').disabled = false
+                    getRef('set_article_meta').textContent = loadingText
+                    getRef('set_article_meta').nextElementSibling.remove()
+                    getRef('set_article_meta').classList.remove('hide')
+                    animateTo(getRef('set_article_meta'), slideInUp, animOptions)
+                }
+        }
         function publishArticle(vc) {
             const { message: { articleID, content, contributors, title, readTime }, vectorClock } = floGlobals.generalData[`publishing_requests|${floGlobals.adminID}|${floGlobals.application}`][vc];
             const isPublished = floGlobals.appObjects.rmTimes.articles.hasOwnProperty(articleID)
             getConfirmation(`${isPublished ? 'Update' : 'Publish'} article?`).then(async res => {
                 if (res) {
-                    getRef('set_article_meta').innerHTML = '<sm-spinner></sm-spinner>'
+                    showLoader(` ${isPublished ? 'UPDATING...' : 'PUBLISHING...'}`)
-                    getRef('set_article_meta').disabled = true
                     const { title, categories, summary, published, tags, contributors, heroImage } = getArticleMetaData()
                     floGlobals.appObjects.adminData.publishedVc[vectorClock] = true
                     floGlobals.appObjects.articlesContent[articleID] = content
@@ -1983,11 +2018,10 @@
                         document.querySelector(`.request-card[data-vc="${vc}"]`).remove()
                         hidePopup()
                     }).catch(err => {
-                        notify(`${isPublished ? 'Update' : 'Publish'} article failed`, 'error')
+                        notify(`${isPublished ? 'UPDATE' : 'PUBLISH'} article failed`, 'error')
                         console.error(err)
                     }).finally(() => {
-                        getRef('set_article_meta').textContent = `${isPublished ? 'Update' : 'Publish'}`
+                        hideLoader(` ${isPublished ? 'UPDATE' : 'PUBLISH'}`)
-                        getRef('set_article_meta').disabled = false
                     })
                 }
             })
@@ -2112,8 +2146,7 @@
         function updateArticleMetaData(articleID) {
             getConfirmation('Update article meta data?').then(async res => {
                 if (res) {
-                    getRef('set_article_meta').innerHTML = '<sm-spinner></sm-spinner>'
+                    showLoader('UPDATING...')
-                    getRef('set_article_meta').disabled = true
                     const { title, categories, summary, published, tags, contributors, heroImage } = getArticleMetaData()
                     floGlobals.appObjects.rmTimes.articles[articleID].categories = categories
                     floGlobals.appObjects.rmTimes.articles[articleID].title = title
@@ -2138,8 +2171,7 @@
                     }).catch(err => {
                         notify(`Error updating article meta data: ${err}`, 'error')
                     }).finally(() => {
-                        getRef('set_article_meta').textContent = 'UPDATE'
+                        hideLoader('UPDATE')
-                        getRef('set_article_meta').disabled = false
                     })
                 }
             })
@@ -2391,7 +2423,6 @@
                     getRef('writers_list').addEventListener('click', handleWritersClick);
                     getRef('approved_ids').addEventListener('click', handleApprovedIDsClick);
                     document.querySelectorAll('.admin-option').forEach(elem => elem.classList.remove('hide'));
-                    location.hash = '#/dashboard'
                 } else {
                     getRef('publishing_requests').removeEventListener('click', handleRequestClick)
                     getRef('article_analytics').removeEventListener('click', handleAnalyticsClick);