From 0f3d2bf01a2a605ed7b10e8b90daf9ad057bb3f0 Mon Sep 17 00:00:00 2001
From: eamedina <eamedina@wikimedia.org>
Date: Mon, 20 May 2024 15:49:44 -0400
Subject: [PATCH] Add loading state

---
 src/link/sections.js | 12 +++++++++++-
 src/link/style.scss  | 27 +++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/link/sections.js b/src/link/sections.js
index 7a82ee4..cd18f03 100644
--- a/src/link/sections.js
+++ b/src/link/sections.js
@@ -14,6 +14,7 @@ export const Sections = ( {
 	const [ sections, setSections ] = useState( null );
 	const [ hoveredIndex, setHoverIndex ] = useState( -1 );
 	const [ selectedSection, setSelectedSection ] = useState( null );
+	const [ loading, setLoading ] = useState( true );
 	const sectionsPrefix = 'wikipediapreview-edit-sections';
 
 	const isItemSelected = ( item ) => {
@@ -62,6 +63,7 @@ export const Sections = ( {
 		if ( ! sections && title && lang ) {
 			wikipediaPreview.getSections( lang, title, ( info ) => {
 				setSections( info.sections );
+				setLoading( false );
 			} );
 		}
 	}, [] );
@@ -91,7 +93,7 @@ export const Sections = ( {
 					role="presentation"
 				></div>
 			</div>
-			{ sections && sections.length ? (
+			{ ! loading && sections && sections.length ? (
 				<div className={ `${ sectionsPrefix }-list` }>
 					{ sections.map( ( item, index ) => {
 						return (
@@ -126,6 +128,14 @@ export const Sections = ( {
 					} ) }
 				</div>
 			) : null }
+			{ loading && (
+				<div className={ `${ sectionsPrefix }-loading` }>
+					<div className={ `${ sectionsPrefix }-loading-spinner` }></div>
+					<bdi className={ `${ sectionsPrefix }-loading-message` }>
+						{ __( 'Loading sections…', 'wikipedia-preview' ) }
+					</bdi>
+				</div>
+			) }
 			<KeyboardShortcuts
 				bindGlobal={ true }
 				shortcuts={ {
diff --git a/src/link/style.scss b/src/link/style.scss
index 45d9561..ada98a0 100644
--- a/src/link/style.scss
+++ b/src/link/style.scss
@@ -598,6 +598,28 @@ body {
 			}
 		}
 
+		&-loading {
+			display: flex;
+			height: 212px;
+			flex-direction: column;
+			justify-content: center;
+    		align-items: center;
+
+			&-spinner {
+				border: 2px solid #f3f3f3;
+				border-top: 2px solid #36c;
+				border-radius: 50%;
+				width: 20px;
+				height: 20px;
+				animation: 2s linear infinite;
+				animation-name: wikipediapreview-edit-sections-loading-spinner;
+			}
+			
+			&-text {
+				align-self: center;
+			}
+		}
+
 		@media screen and (max-width: 782px) {
 			width: 100%;
 			max-height: unset;
@@ -831,3 +853,8 @@ body {
 		transform: translateX(calc(100vw - 150px));
 	}
 }
+
+@keyframes wikipediapreview-edit-sections-loading-spinner {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}