feat(ui): Load more teams on organization teams page (#30395)

Utilizes the new loadMore function from the useTeams hook #30307 to render additional teams when clicked.

static/app/actionCreators/organizations.tsx

@@ -184,7 +184,7 @@ export async function fetchOrganizationDetails(
   }
 
   if (loadTeam) {
-    TeamStore.loadInitialData(data.teams);
+    TeamStore.loadInitialData(data.teams, false, null);
   }
 
   if (loadProjects) {

static/app/views/settings/organizationTeams/organizationTeams.tsx

@@ -72,7 +72,7 @@ function OrganizationTeams({
 
   const [teamQuery, setTeamQuery] = useState('');
   const {initiallyLoaded} = useTeams({provideUserTeams: true});
-  const {teams, onSearch} = useTeams();
+  const {teams, onSearch, loadMore, hasMore, fetching} = useTeams();
 
   const debouncedSearch = debounce(onSearch, DEFAULT_DEBOUNCE_DURATION);
   function handleSearch(query: string) {
@@ -130,6 +130,12 @@ function OrganizationTeams({
           />
         </PanelBody>
       </Panel>
+      {hasMore && (
+        <LoadMoreWrapper>
+          {fetching && <LoadingIndicator mini />}
+          <Button onClick={() => loadMore(teamQuery)}>{t('Show more')}</Button>
+        </LoadMoreWrapper>
+      )}
     </div>
   );
 }
@@ -138,4 +144,12 @@ const StyledSearchBar = styled(SearchBar)`
   margin-bottom: ${space(2)};
 `;
 
+const LoadMoreWrapper = styled('div')`
+  display: grid;
+  grid-gap: ${space(2)};
+  align-items: center;
+  justify-content: end;
+  grid-auto-flow: column;
+`;
+
 export default OrganizationTeams;