From 8b0ae7e5f0eec67a9870cabdba2de12dea0c5a55 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Wed, 31 Jan 2024 15:40:35 -0500
Subject: [PATCH] Make rendering elements declarative

All items will be on the page, and hidden/visible based on loading state.
---
 .../src/site-screenshot/render.php            | 17 ++++++++--
 .../src/site-screenshot/style.scss            |  5 +++
 .../src/site-screenshot/view.js               | 33 +++++--------------
 3 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/render.php b/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/render.php
index 5db0191f..2f94132a 100644
--- a/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/render.php
+++ b/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
diff --git a/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/style.scss b/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/style.scss
index 678e37a9..94d15998 100644
--- a/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/style.scss
+++ b/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;
diff --git a/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/view.js b/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/view.js
index 82515460..f22c0a67 100644
--- a/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/view.js
+++ b/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,12 @@ const { actions, state } = store( 'wporg/showcase/screenshot', {
 		get base64Image() {
 			return getContext().base64Image;
 		},
+		get hasError() {
+			return getContext().hasError;
+		},
+		get hasLoaded() {
+			return state.base64Image || state.hasError;
+		},
 	},
 	actions: {
 		increaseAttempts() {
@@ -68,6 +74,7 @@ const { actions, state } = store( 'wporg/showcase/screenshot', {
 			}
 		},
 	},
+
 	callbacks: {
 		// Run on init, starts the image fetch process.
 		*init() {
@@ -90,29 +97,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' );
-			}
-		},
 	},
 } );