diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss/base/layout.pcss b/public_html/wp-content/themes/wporg-events-2023/postcss/base/layout.pcss index f952d89dba..08b17b7a08 100644 --- a/public_html/wp-content/themes/wporg-events-2023/postcss/base/layout.pcss +++ b/public_html/wp-content/themes/wporg-events-2023/postcss/base/layout.pcss @@ -14,3 +14,9 @@ body { .wporg-events__hidden { display: none; } + +.wporg-marker-list__loading { + /* The final height could be anywhere between 50px and 750px, so split the difference in order to avoid a big + * jump when it loads. */ + height: 350px; +} diff --git a/public_html/wp-content/themes/wporg-events-2023/src/event-list/index.php b/public_html/wp-content/themes/wporg-events-2023/src/event-list/index.php index e305b248fe..336f4ff693 100644 --- a/public_html/wp-content/themes/wporg-events-2023/src/event-list/index.php +++ b/public_html/wp-content/themes/wporg-events-2023/src/event-list/index.php @@ -67,7 +67,7 @@ function enqueue_assets() { */ function render( $attributes, $content, $block ) { if ( 'nearby' === $attributes['events'] ) { - $content = get_nearby_loading(); + $content = get_nearby_events_markup(); } else { $content = get_all_upcoming( $attributes['events'], $attributes['limit'], $attributes['groupByMonth'] ); } @@ -121,17 +121,35 @@ function( $a, $b ) { } // -function get_nearby_loading() { - return sprintf( - '

- Loading nearby events... - -

- - %s', - esc_url( includes_url( 'images/spinner-2x.gif' ) ), - get_list_markup( array() ) - ); +function get_nearby_events_markup() { + ob_start(); + + ?> + +

+ Loading nearby events... + +

+ + + + +
+

+ There are no events scheduled near you at the moment. You can browse global events, or + learn how to organize an event in your area. +

+
+ + + 0 ) { + for ( let i = 0; i < results.events.length; i++ ) { + const eventDiv = document.createElement( 'li' ); + eventDiv.classList.add( 'wporg-marker-list-item' ); + eventDiv.innerHTML = renderEvent( results.events[ i ] ); + listContainer.appendChild( eventDiv ); + // review for security + } + + } else { + noEventsMessage.classList.remove( 'wporg-events__hidden' ); } - // review for security } catch ( error ) { // This matches the format returned by the API for application-layer errors (e.g., invalid API key).