Fix/Studio spinner makes surroundings overflow (#11974)

* removed studioCenter wrapper * add some styling to the replacement * replace studiCenter + studiospinner with studioPageSpinner * use variable on gap-distance in styling * remove unused variable
Altinn · Jan 9, 2024 · 0848b1e · 0848b1e
1 parent 85999aa
commit 0848b1e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/frontend/app-development/features/overview/components/Overview.tsx b/frontend/app-development/features/overview/components/Overview.tsx
@@ -11,7 +11,7 @@ import { AppLogs } from './AppLogs';
 import { Navigation } from './Navigation';
 import { News } from './News';
 import { PageContainer } from 'app-shared/components/PageContainer/PageContainer';
-import { StudioCenter, StudioSpinner } from '@studio/components';
+import { StudioPageSpinner } from '@studio/components';
 import { useRepoMetadataQuery } from 'app-shared/hooks/queries';
 import { RepoOwnedByPersonInfo } from './RepoOwnedByPersonInfo';
 
@@ -38,11 +38,7 @@ export const Overview = () => {
   }
 
   if (isPendingAppConfig || isPendingOrgs) {
-    return (
-      <StudioCenter>
-        <StudioSpinner spinnerText={t('general.loading')} className={classes.spinner} />
-      </StudioCenter>
-    );
+    return <StudioPageSpinner spinnerText={t('general.loading')} className={classes.spinner} />;
   }
 
   // If repo-owner is an organisation
@@ -53,7 +49,9 @@ export const Overview = () => {
       <main className={classes.container}>
         <header className={classes.header} role='generic'>
           {/* According to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header, the role of <header> should implicitly be "generic" when it is a descendant of <main>, but Testing Library still interprets it as "banner". */}
-          <Heading level={1} size='xlarge'>{appConfigData?.serviceName || app}</Heading>
+          <Heading level={1} size='xlarge'>
+            {appConfigData?.serviceName || app}
+          </Heading>
         </header>
         <div className={classes.panel}>
           <div className={classes.content}>

diff --git a/frontend/libs/studio-components/src/components/StudioSpinner/StudioSpinner.module.css b/frontend/libs/studio-components/src/components/StudioSpinner/StudioSpinner.module.css
@@ -0,0 +1,6 @@
+.spinnerWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--fds-spacing-1);
+}
diff --git a/frontend/libs/studio-components/src/components/StudioSpinner/StudioSpinner.tsx b/frontend/libs/studio-components/src/components/StudioSpinner/StudioSpinner.tsx
@@ -2,7 +2,7 @@ import React, { HTMLAttributes, forwardRef, useId } from 'react';
 import { Paragraph, Spinner } from '@digdir/design-system-react';
 import type { SpinnerProps } from '@digdir/design-system-react';
 import { useTranslation } from 'react-i18next';
-import { StudioCenter } from '../StudioCenter';
+import classes from './StudioSpinner.module.css';
 
 export type StudioSpinnerProps = {
   spinnerText?: string;
@@ -17,7 +17,7 @@ export const StudioSpinner = forwardRef<HTMLDivElement, StudioSpinnerProps>(
     const spinnerDescriptionId = useId();
 
     return (
-      <StudioCenter ref={ref} {...rest}>
+      <div className={classes.spinnerWrapper} ref={ref} {...rest}>
         <Spinner
           title={!spinnerText && t('general.loading')}
           size={size}
@@ -30,7 +30,7 @@ export const StudioSpinner = forwardRef<HTMLDivElement, StudioSpinnerProps>(
             {spinnerText}
           </Paragraph>
         )}
-      </StudioCenter>
+      </div>
     );
   },
 );