improve loading indicator

source/front/blocks/events-list/edit.js

@@ -11,9 +11,9 @@ const NAME = '<wordpress-name>'
 export default ({ attributes, setAttributes }) => {
   const blockProps = useBlockProps()
   useEffect(() => {
-    reloadEventLists()
+    reloadEventList()
   }, [])
-  function reloadEventLists() {
+  function reloadEventList() {
     const container = document.getElementById(blockProps.id)
     if (container) {
       loadEventList(container)
@@ -23,11 +23,11 @@ export default ({ attributes, setAttributes }) => {
     let newValue = Number(event.target.value)
     if (newValue < 1) newValue = 1
     setAttributes({ eventsCount: newValue })
-    reloadEventLists()
+    reloadEventList()
   }
   function updateGroupName(event) {
     setAttributes({ groupName: event.target.value })
-    reloadEventLists()
+    reloadEventList()
   }
   return [
     <InspectorControls>
@@ -66,15 +66,16 @@ export default ({ attributes, setAttributes }) => {
       data-group-name={attributes.groupName}
       {...blockProps}
     >
-      <div style={{ display: 'none' }}>
+      <div className="general-error" style={{ display: 'none' }}>
         {__('The events could not be loaded!', '<wordpress-name>')}
       </div>
-      <div style={{ display: 'none' }}>
+      <div className="group-not-found" style={{ display: 'none' }}>
         {__('The group could not be found!', '<wordpress-name>')}
       </div>
-      <ul>
+      <div className="loading-indicator" style={{ display: 'none' }}>
-        <li>{__('Loading...', '<wordpress-name>')}</li>
+        {__('Loading...', '<wordpress-name>')}
-      </ul>
+      </div>
+      <ul></ul>
     </div>,
   ]
 }

source/front/blocks/events-list/save.js

@@ -5,23 +5,25 @@ const { __ } = wp.i18n
 const NAME = '<wordpress-name>'
 
 export default ({ attributes }) => {
-  const blockProps = useBlockProps.save()
+  const blockProps = useBlockProps.save({
+    className: NAME + '_events-list',
+  })
   return (
     <div
-      className={NAME + '_events-list'}
       data-maximum={attributes.eventsCount}
       data-group-name={attributes.groupName}
       {...blockProps}
     >
-      <div style={{ display: 'none' }}>
+      <div className="general-error" style={{ display: 'none' }}>
         {__('The events could not be loaded!', '<wordpress-name>')}
       </div>
-      <div style={{ display: 'none' }}>
+      <div className="group-not-found" style={{ display: 'none' }}>
         {__('The group could not be found!', '<wordpress-name>')}
       </div>
-      <ul>
+      <div className="loading-indicator" style={{ display: 'none' }}>
-        <li>{__('Loading...', '<wordpress-name>')}</li>
+        {__('Loading...', '<wordpress-name>')}
-      </ul>
+      </div>
+      <ul></ul>
     </div>
   )
 }

source/front/events-displayer-test.js

@@ -16,18 +16,24 @@ test.before(() => {
 
 test.beforeEach((t) => {
   t.context.container = document.createElement('div')
+  t.context.container.setAttribute('data-maximum', '2')
 
-  const errorMessageGroupNotFound = document.createElement('div')
-  errorMessageGroupNotFound.setAttribute('style', 'display: none;')
-  t.context.container.appendChild(errorMessageGroupNotFound)
   const errorMessageGeneral = document.createElement('div')
+  errorMessageGeneral.setAttribute('class', 'general-error')
   errorMessageGeneral.setAttribute('style', 'display: none;')
   t.context.container.appendChild(errorMessageGeneral)
 
+  const errorMessageGroupNotFound = document.createElement('div')
+  errorMessageGroupNotFound.setAttribute('class', 'group-not-found')
+  errorMessageGroupNotFound.setAttribute('style', 'display: none;')
+  t.context.container.appendChild(errorMessageGroupNotFound)
+
+  const loadingIndicator = document.createElement('div')
+  loadingIndicator.setAttribute('class', 'loading-indicator')
+  loadingIndicator.setAttribute('style', 'display: none;')
+  t.context.container.appendChild(loadingIndicator)
+
   const list = document.createElement('ul')
-  list.setAttribute('data-maximum', '2')
-  const loadingMessage = document.createElement('li')
-  list.appendChild(loadingMessage)
   t.context.container.appendChild(list)
 })
 
@@ -65,7 +71,7 @@ test.skip('#displayEvents one event', (t) => {
 
 test('#displayErrorMessage no list entries shown', (t) => {
   const container = t.context.container
-  const list = container.children[2]
+  const list = container.children[3]
   displayErrorMessage({ data: '', container })
   t.is(list.children.length, 0)
 })
@@ -75,6 +81,7 @@ test('#displayErrorMessage error message display', (t) => {
   displayErrorMessage({ data: '', container })
   t.is(container.children[0].style.display, 'block')
   t.is(container.children[1].style.display, 'none')
+  t.is(container.children[2].style.display, 'none')
 })
 
 test('#displayErrorMessage group not found error message display', (t) => {
@@ -91,4 +98,5 @@ test('#displayErrorMessage group not found error message display', (t) => {
   displayErrorMessage({ data, container })
   t.is(container.children[0].style.display, 'none')
   t.is(container.children[1].style.display, 'block')
+  t.is(container.children[2].style.display, 'none')
 })

source/front/events-displayer.js

@@ -1,13 +1,13 @@
 import Formatter from './formatter.js'
 import { createAnchorElement } from './html-creator.js'
 
-function removeLoadingMessageOrPreviousEvents(container) {
+export function clearEventsList(container) {
   const list = container.querySelector('ul')
   list.replaceChildren()
 }
 
 export function displayEvents({ data, document, container }) {
-  removeLoadingMessageOrPreviousEvents(container)
+  hideLoadingIndicator(container)
 
   const isShortOffsetNameShown = SETTINGS.isShortOffsetNameShown
   const locale = SETTINGS.locale
@@ -61,7 +61,7 @@ export function displayEvents({ data, document, container }) {
 }
 
 export function displayErrorMessage({ data, container }) {
-  removeLoadingMessageOrPreviousEvents(container)
+  hideLoadingIndicator(container)
   console.error(data)
   if (
     Object.prototype.hasOwnProperty.call(data, 'response') &&
@@ -70,8 +70,20 @@ export function displayErrorMessage({ data, container }) {
     Object.prototype.hasOwnProperty.call(data.response.errors[0], 'code') &&
     data.response.errors[0].code === 'group_not_found'
   ) {
-    container.children[1].style.display = 'block'
+    const message = container.querySelector('.group-not-found')
+    message.style.display = 'block'
   } else {
-    container.children[0].style.display = 'block'
+    const message = container.querySelector('.general-error')
+    message.style.display = 'block'
   }
 }
+
+export function showLoadingIndicator(container) {
+  const indicator = container.querySelector('.loading-indicator')
+  indicator.style.display = 'block'
+}
+
+function hideLoadingIndicator(container) {
+  const indicator = container.querySelector('.loading-indicator')
+  indicator.style.display = 'none'
+}

source/front/events-loader.js

@@ -1,4 +1,9 @@
-import { displayEvents, displayErrorMessage } from './events-displayer.js'
+import {
+  clearEventsList,
+  displayEvents,
+  displayErrorMessage,
+  showLoadingIndicator,
+} from './events-displayer.js'
 import * as GraphqlWrapper from './graphql-wrapper.js'
 
 const NAME = '<wordpress-name>'
@@ -17,6 +22,8 @@ export function loadEventList(container) {
   const url = SETTINGS.url + URL_SUFFIX
   const limit = parseInt(container.getAttribute('data-maximum'))
   const groupName = container.getAttribute('data-group-name')
+  clearEventsList(container)
+  showLoadingIndicator(container)
   if (groupName) {
     GraphqlWrapper.getUpcomingEventsByGroupName({ url, limit, groupName })
       .then((data) => displayEvents({ data, document, container }))

source/view/events-list.php

@@ -7,9 +7,8 @@ if (!defined('ABSPATH')) {
 <div class="<?php echo esc_attr($classNamePrefix); ?>_events-list"
   data-maximum="<?php echo esc_attr($eventsCount); ?>"
   data-group-name="<?php echo esc_attr($groupName); ?>">
-  <div style="display: none;"><?php esc_html_e('The events could not be loaded!', 'connector-mobilizon'); ?></div>
+  <div class="general-error" style="display: none;"><?php esc_html_e('The events could not be loaded!', 'connector-mobilizon'); ?></div>
-  <div style="display: none;"><?php esc_html_e('The group could not be found!', 'connector-mobilizon'); ?></div>
+  <div class="group-not-found" style="display: none;"><?php esc_html_e('The group could not be found!', 'connector-mobilizon'); ?></div>
-  <ul>
+  <div class="loading-indicator" style="display: none;"><?php esc_html_e('Loading...', 'connector-mobilizon'); ?></div>
-    <li><?php esc_html_e('Loading...', 'connector-mobilizon'); ?></li>
+  <ul></ul>
-  </ul>
 </div>