From 0eaebdc21d1f7dee2e473f94e5400ecb6584ef43 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Tue, 17 Dec 2024 13:08:30 -0500
Subject: [PATCH] fix: loading layout of results and sort button

---
 .../items-list/ItemsList.tsx                  | 36 +++++++++----------
 .../items-list/ItemsSortBy.tsx                |  1 +
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/sections/collection/collection-items-panel/items-list/ItemsList.tsx b/src/sections/collection/collection-items-panel/items-list/ItemsList.tsx
index eee614076..d99469394 100644
--- a/src/sections/collection/collection-items-panel/items-list/ItemsList.tsx
+++ b/src/sections/collection/collection-items-panel/items-list/ItemsList.tsx
@@ -100,28 +100,28 @@ export const ItemsList = forwardRef(
           {areItemsAvailable && (
             <>
               <header>
-                {isLoadingItems ? (
-                  <SkeletonTheme>
-                    <Skeleton height={19} width={190} />
-                  </SkeletonTheme>
-                ) : (
-                  <Row>
-                    <Col>
+                <Row>
+                  <Col>
+                    {isLoadingItems ? (
+                      <SkeletonTheme>
+                        <Skeleton height={19} width={190} />
+                      </SkeletonTheme>
+                    ) : (
                       <PaginationResultsInfo
                         paginationInfo={paginationInfo}
                         accumulated={accumulatedCount}
                       />
-                    </Col>
-                    <Col className={styles['sort-button']}>
-                      <ItemsSortBy
-                        isLoadingCollectionItems={isLoadingItems}
-                        currentSortType={sortSelected}
-                        currentSortOrder={orderSelected}
-                        currentSearchText={searchText}
-                        onSortChange={onSortChange}></ItemsSortBy>
-                    </Col>
-                  </Row>
-                )}
+                    )}
+                  </Col>
+                  <Col className={styles['sort-button']}>
+                    <ItemsSortBy
+                      isLoadingCollectionItems={isLoadingItems}
+                      currentSortType={sortSelected}
+                      currentSortOrder={orderSelected}
+                      currentSearchText={searchText}
+                      onSortChange={onSortChange}></ItemsSortBy>
+                  </Col>
+                </Row>
               </header>
 
               <ul data-testid="items-list">
diff --git a/src/sections/collection/collection-items-panel/items-list/ItemsSortBy.tsx b/src/sections/collection/collection-items-panel/items-list/ItemsSortBy.tsx
index c826ba403..eec24e492 100644
--- a/src/sections/collection/collection-items-panel/items-list/ItemsSortBy.tsx
+++ b/src/sections/collection/collection-items-panel/items-list/ItemsSortBy.tsx
@@ -88,6 +88,7 @@ export function ItemsSortBy({
       title={t('sort.title')}
       id="collection-items-sort"
       variant="secondary"
+      disabled={isLoadingCollectionItems}
       onSelect={handleSortChange}>
       {Object.values(sortOptions).map((sortByOption) => (
         <DropdownButtonItem