Make rendering elements declarative

All items will be on the page, and hidden/visible based on loading state.

source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/render.php

@@ -100,9 +100,22 @@
 		<div
 			class="wporg-site-screenshot__mshot-container"
 			data-wp-init="callbacks.init"
-			data-wp-watch="callbacks.update"
+			data-wp-class--has-loaded="state.hasLoaded"
 		>
-			<div class="wporg-site-screenshot__loader"></div>
+			<div
+				data-wp-class--wporg-site-screenshot__loader="!state.hasLoaded"
+				data-wp-class--wporg-site-screenshot__error="state.hasError"
+			>
+				<img
+					data-wp-bind--hidden="!state.base64Image"
+					data-wp-bind--alt="context.alt"
+					data-wp-bind--src="state.base64Image"
+				/>
+				<span
+					data-wp-bind--hidden="state.base64Image"
+					data-wp-text="context.alt"
+				></span>
+			</div>
 		</div>
 	<?php else : ?>
 		<img

source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/style.scss

@@ -82,6 +82,11 @@
 		justify-content: center;
 		height: 100%;
 
+		img,
+		span {
+			display: none;
+		}
+
 		&::after {
 			content: "";
 			display: inline-block;

source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/view.js

@@ -2,7 +2,7 @@
 /**
  * WordPress dependencies
  */
-import { getContext, getElement, store } from '@wordpress/interactivity';
+import { getContext, store } from '@wordpress/interactivity';
 
 /**
  * Module constants
@@ -21,6 +21,13 @@ const { actions, state } = store( 'wporg/showcase/screenshot', {
 		get base64Image() {
 			return getContext().base64Image;
 		},
+		get hasError() {
+			return getContext().hasError;
+		},
+		get hasLoaded() {
+			console.log( state.base64Image, state.hasError );
+			return state.base64Image || state.hasError;
+		},
 	},
 	actions: {
 		increaseAttempts() {
@@ -68,6 +75,7 @@ const { actions, state } = store( 'wporg/showcase/screenshot', {
 			}
 		},
 	},
+
 	callbacks: {
 		// Run on init, starts the image fetch process.
 		*init() {
@@ -90,29 +98,5 @@ const { actions, state } = store( 'wporg/showcase/screenshot', {
 				}
 			}
 		},
-
-		update() {
-			const context = getContext();
-			const { ref } = getElement();
-			const { alt, hasError, isMShots } = context;
-
-			if ( ! isMShots ) {
-				return;
-			}
-
-			if ( hasError ) {
-				const spinner = ref.querySelector( 'div' );
-				spinner.classList.remove( 'wporg-site-screenshot__loader' );
-				spinner.classList.add( 'wporg-site-screenshot__error' );
-				spinner.innerText = alt;
-				ref.parentElement.classList.remove( 'has-loaded' );
-			} else if ( state.base64Image ) {
-				const img = document.createElement( 'img' );
-				img.src = state.base64Image;
-				img.alt = alt;
-				ref.replaceChildren( img );
-				ref.parentElement.classList.add( 'has-loaded' );
-			}
-		},
 	},
 } );