Improve loading of apps and data models on Dashboard

frontend/dashboard/components/DataModelsRepoList/DataModelsRepoList.tsx

@@ -30,7 +30,6 @@ export const DataModelsReposList = ({ user, organizations }: DataModelsReposList
   const { data: dataModelRepos, isPending: hasPendingDataModels } = useSearchReposQuery({
     uid: uid as number,
     keyword: DATA_MODEL_REPO_IDENTIFIER,
-    page: 1,
   });
 
   const dataModelsIncludingStarredData = useAugmentReposWithStarred({

frontend/dashboard/components/OrgRepoList/OrgReposList.tsx

@@ -35,7 +35,6 @@ export const OrgReposList = ({ user, organizations }: OrgReposListProps) => {
   const { data: dataModelsResults, isPending: hasPendingDataModels } = useSearchReposQuery({
     uid: uid as number,
     keyword: DATA_MODEL_REPO_IDENTIFIER,
-    page: 1,
   });
   const totalRows = repoResults?.totalCount - dataModelsResults?.totalCount ?? 0;
 

frontend/dashboard/components/RepoList/ActionLinks.module.css

@@ -5,14 +5,20 @@
 }
 
 .giteaButton {
-  margin-right: 0.7rem;
+  margin-right: var(--fds-spacing-2);
 }
 
 .giteaIcon {
-  font-size: 2rem;
+  font-size: var(--fds-sizing-8);
+  padding-top: var(--fds-spacing-1);
   color: var(--fds-semantic-text-success-default);
 }
 
-.nativeActionIcon {
-  font-size: 1.7rem;
+.editButton {
+  padding-top: var(--fds-spacing-2);
+}
+
+.akselIcon {
+  font-size: var(--fds-sizing-7);
+  color: var(--fds-semantic-text-action-default);
 }

frontend/dashboard/components/RepoList/ActionLinks.test.tsx

@@ -32,10 +32,10 @@ describe('ActionLinks', () => {
   it('should render the three buttons', () => {
     render(<ActionLinks repo={repo} />);
 
-    const giteaButton = screen.getByRole('link', {
+    const giteaButton = screen.getByRole('button', {
       name: textMock('dashboard.show_repo', { appName: repoName }),
     });
-    const editButton = screen.getByRole('link', {
+    const editButton = screen.getByRole('button', {
       name: textMock('dashboard.edit_app', { appName: repoName }),
     });
     const dropdownButton = screen.getByRole('button', {

frontend/dashboard/components/RepoList/ActionLinks.tsx

@@ -1,18 +1,18 @@
-import { Button, DropdownMenu } from '@digdir/designsystemet-react';
+import { StudioButton, StudioDropdownMenu } from '@studio/components';
+import type { StudioButtonProps } from '@studio/components';
 import React, { useRef, useState } from 'react';
 import classes from './ActionLinks.module.css';
-import cn from 'classnames';
 import {
   ExternalLinkIcon,
   FilesIcon,
+  GiteaIcon,
   MenuElipsisVerticalIcon,
   PencilIcon,
-} from '@navikt/aksel-icons';
+} from '@studio/icons';
 import { useTranslation } from 'react-i18next';
 import { getRepoEditUrl } from '../../utils/urlUtils';
 import type { Repository } from 'app-shared/types/Repository';
 import { MakeCopyModal } from '../MakeCopyModal';
-import { DATA_MODEL_REPO_IDENTIFIER } from '../../constants';
 
 type ActionLinksProps = {
   repo: Repository;
@@ -36,52 +36,56 @@ export const ActionLinks = ({ repo }: ActionLinksProps): React.ReactElement => {
 
   const repoFullName = repo.full_name;
   const [org, repoName] = repoFullName.split('/');
-  const isDataModelRepo = repoFullName.endsWith(DATA_MODEL_REPO_IDENTIFIER);
   const editUrl = getRepoEditUrl({ org, repo: repoName });
-  const editTextKey = t(isDataModelRepo ? 'dashboard.edit_data_models' : 'dashboard.edit_app', {
-    appName: repoName,
-  });
+
+  const giteaIconWithLink = (
+    <a href={repo.html_url}>
+      <GiteaIcon className={classes.giteaIcon} />
+    </a>
+  );
+
+  const editIconWithLink = (
+    <a href={editUrl}>
+      <PencilIcon className={classes.akselIcon} />
+    </a>
+  );
+
+  const dropdownAnchorButtonProps: StudioButtonProps = {
+    variant: 'tertiary',
+    icon: <MenuElipsisVerticalIcon className={classes.akselIcon} />,
+    title: t('dashboard.app_dropdown', {
+      appName: repoName,
+    }),
+  };
 
   return (
     <div className={classes.actionLinksContainer} ref={copyModalAnchorRef}>
-      <Button variant={'tertiary'} className={classes.giteaButton} icon asChild>
-        <a
-          href={repo.html_url}
-          title={t('dashboard.show_repo', {
-            appName: repoName,
-          })}
-        >
-          <i className={cn('fa fa-gitea', classes.giteaIcon)} />
-        </a>
-      </Button>
-      <Button variant={'tertiary'} icon asChild>
-        <a href={editUrl} title={editTextKey}>
-          <PencilIcon className={classes.nativeActionIcon} />
-        </a>
-      </Button>
-      <DropdownMenu size={'small'}>
-        <DropdownMenu.Trigger
-          variant={'tertiary'}
-          title={t('dashboard.app_dropdown', {
-            appName: repoName,
-          })}
-          asChild
-        >
-          <Button variant={'tertiary'} icon>
-            <MenuElipsisVerticalIcon className={classes.nativeActionIcon} />
-          </Button>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content>
-          <DropdownMenu.Item onClick={() => handleOpenCopyModal(repoFullName)}>
-            {<FilesIcon />}
-            {t('dashboard.make_copy')}
-          </DropdownMenu.Item>
-          <DropdownMenu.Item onClick={() => window.open(editUrl, '_blank')}>
-            {<ExternalLinkIcon />}
-            {t('dashboard.open_in_new')}
-          </DropdownMenu.Item>
-        </DropdownMenu.Content>
-      </DropdownMenu>
+      <StudioButton
+        title={t('dashboard.show_repo', {
+          appName: repoName,
+        })}
+        variant='tertiary'
+        className={classes.giteaButton}
+        icon={giteaIconWithLink}
+      />
+      <StudioButton
+        title={t('dashboard.edit_app', {
+          appName: repoName,
+        })}
+        variant='tertiary'
+        className={classes.editButton}
+        icon={editIconWithLink}
+      />
+      <StudioDropdownMenu size='small' anchorButtonProps={dropdownAnchorButtonProps}>
+        <StudioDropdownMenu.Item onClick={() => handleOpenCopyModal(repoFullName)}>
+          <FilesIcon />
+          {t('dashboard.make_copy')}
+        </StudioDropdownMenu.Item>
+        <StudioDropdownMenu.Item onClick={() => window.open(editUrl, '_blank')}>
+          <ExternalLinkIcon />
+          {t('dashboard.open_in_new')}
+        </StudioDropdownMenu.Item>
+      </StudioDropdownMenu>
       {copyCurrentRepoName && (
         <MakeCopyModal
           ref={copyModalAnchorRef}

frontend/dashboard/components/RepoList/FavoriteButton.module.css

@@ -1,3 +1,3 @@
 .favoriteIcon {
-  font-size: 1.7rem;
+  font-size: var(--fds-sizing-7);
 }

frontend/dashboard/components/RepoList/FavoriteButton.tsx

@@ -1,5 +1,5 @@
 import { StarFillIcon, StarIcon } from '@navikt/aksel-icons';
-import { Button } from '@digdir/designsystemet-react';
+import { StudioButton } from '@studio/components';
 import React from 'react';
 import { useSetStarredRepoMutation, useUnsetStarredRepoMutation } from '../../hooks/mutations';
 import type { RepoIncludingStarredData } from '../../utils/repoUtils/repoUtils';
@@ -27,15 +27,13 @@ export const FavoriteButton = ({ repo }: FavoriteButtonProps): React.ReactElemen
     appName: repo.name,
   });
 
-  return (
-    <Button title={title} onClick={handleToggleFav} variant={'tertiary'} icon>
-      {repo.hasStarred ? (
-        <StarFillIcon className={classes.favoriteIcon} />
-      ) : (
-        <StarIcon className={classes.favoriteIcon} />
-      )}
-    </Button>
+  const icon = repo.hasStarred ? (
+    <StarFillIcon className={classes.favoriteIcon} />
+  ) : (
+    <StarIcon className={classes.favoriteIcon} />
   );
+
+  return <StudioButton title={title} onClick={handleToggleFav} variant='tertiary' icon={icon} />;
 };
 
 FavoriteButton.displayName = 'FavoriteButton';

frontend/dashboard/components/RepoList/RepoList.tsx

@@ -3,11 +3,7 @@ import type { RepoIncludingStarredData } from 'dashboard/utils/repoUtils/repoUti
 import { useTranslation } from 'react-i18next';
 import type { DATAGRID_PAGE_SIZE_TYPE } from '../../constants';
 import { DATAGRID_DEFAULT_PAGE_SIZE, DATAGRID_PAGE_SIZE_OPTIONS } from '../../constants';
-import {
-  StudioSpinner,
-  StudioTableLocalPagination,
-  StudioTableRemotePagination,
-} from '@studio/components';
+import { StudioTableLocalPagination, StudioTableRemotePagination } from '@studio/components';
 import type { Columns, PaginationTexts, RemotePaginationProps } from '@studio/components';
 import { ActionLinks } from './ActionLinks';
 import { FavoriteButton } from './FavoriteButton';
@@ -84,7 +80,8 @@ export const RepoList = ({
     },
   ];
 
-  // The local table can sort all columns, but Gitea API does not support sorting by createdBy or description
+  // The local table can sort all columns, but the Gitea API does not support sorting by createdBy or description
+  // Therefore, we remove the sortable property from these columns when using server-side sorting
   const nonSortableAccessors = ['createdBy', 'description'];
   const remotePaginationColumns = columns.map((column) => ({
     ...column,
@@ -101,9 +98,7 @@ export const RepoList = ({
     actionIcons: <ActionLinks repo={repo} />,
   }));
 
-  const emptyTableFallback = isLoading ? (
-    <StudioSpinner spinnerTitle={t('general.loading')} />
-  ) : (
+  const emptyTableFallback = (
     <Paragraph size={tableSize}>{t('dashboard.no_repos_result')}</Paragraph>
   );
 
@@ -133,6 +128,8 @@ export const RepoList = ({
           columns={remotePaginationColumns}
           rows={rows}
           size={tableSize}
+          isLoading={isLoading}
+          loadingText={t('general.loading')}
           emptyTableFallback={emptyTableFallback}
           pagination={paginationProps}
           onSortClick={onSortClick}
@@ -142,6 +139,8 @@ export const RepoList = ({
           columns={columns}
           rows={rows}
           size={tableSize}
+          isLoading={isLoading}
+          loadingText={t('general.loading')}
           emptyTableFallback={emptyTableFallback}
           pagination={paginationProps}
         />

frontend/dashboard/components/RepoList/RepoNameWithLink.tsx

@@ -3,7 +3,6 @@ import { Link } from '@digdir/designsystemet-react';
 import classes from './RepoNameWithLink.module.css';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { DATA_MODEL_REPO_IDENTIFIER } from '../../constants';
 
 type RepoNameWithLinkProps = {
   repoFullName: string;
@@ -13,14 +12,16 @@ export const RepoNameWithLink = ({ repoFullName }: RepoNameWithLinkProps): React
   const { t } = useTranslation();
 
   const [org, repoName] = repoFullName.split('/');
-  const isDataModelRepo = repoFullName.endsWith(DATA_MODEL_REPO_IDENTIFIER);
   const editUrl = getRepoEditUrl({ org, repo: repoName });
-  const editTextKey = t(isDataModelRepo ? 'dashboard.edit_data_models' : 'dashboard.edit_app', {
-    appName: repoName,
-  });
 
   return (
-    <Link className={classes.repoLink} href={editUrl} title={editTextKey}>
+    <Link
+      className={classes.repoLink}
+      href={editUrl}
+      title={t('dashboard.edit_app', {
+        appName: repoName,
+      })}
+    >
       {repoName}
     </Link>
   );

frontend/dashboard/hooks/useReposSearch/useRepoSearch.ts

@@ -75,6 +75,15 @@ export const useReposSearch = ({
   const { data: searchResults, isPending: isLoadingSearchResults } =
     useSearchReposQuery(cleanFilter);
 
+  const getNextExistingPageNumber = () => {
+    const numberOfPages = Math.ceil(searchResults?.totalCount / pageSize);
+    const nextPageNumber = pageNumber + 1;
+    return nextPageNumber <= numberOfPages ? nextPageNumber : pageNumber;
+  };
+
+  // Prefetch and cache the next page, if it exists
+  useSearchReposQuery({ ...cleanFilter, page: getNextExistingPageNumber() });
+
   return {
     searchResults,
     isLoadingSearchResults,

frontend/language/src/en.json

@@ -74,7 +74,6 @@
   "dashboard.data_models": "Data models",
   "dashboard.description": "Description",
   "dashboard.edit_app": "Edit {{appName}} in Studio",
-  "dashboard.edit_data_models": "Edit {{appName}} in Studio",
   "dashboard.favorite_status": "Favorite status",
   "dashboard.favourites": "Favourites",
   "dashboard.field_cannot_be_empty": "Field cannot be empty",

frontend/language/src/nb.json

@@ -109,8 +109,7 @@
   "dashboard.creating_your_service": "Oppretter appen din",
   "dashboard.data_models": "Datamodeller",
   "dashboard.description": "Beskrivelse",
-  "dashboard.edit_app": "Rediger {{appName}} i Studio",
-  "dashboard.edit_data_models": "Rediger {{appName}} i Studio",
+  "dashboard.edit_app": "Endre {{appName}} i Studio",
   "dashboard.favorite_status": "Favorittstatus",
   "dashboard.favourites": "Favoritter",
   "dashboard.field_cannot_be_empty": "Dette feltet kan ikke være tomt",
@@ -154,7 +153,7 @@
   "dashboard.show_repo": "Vis repoet til {{appName}}",
   "dashboard.star": "Legg til {{appName}} i favoritter",
   "dashboard.total_count": "Rader totalt:",
-  "dashboard.unstar": "Fjern {{appName}} fra favoritter",
+  "dashboard.unstar": "Slett {{appName}} fra favoritter",
   "dashboard.view_apps_error_title": "Kan ikke vise listen over applikasjoner",
   "dashboard.view_data_models_error_title": "Kan ikke vise listen over datamodeller",
   "dashboard.view_favorites_error_title": "Kan ikke vise listen over favoritter",