Integrate DollySpinner into BestillingProgresjon and DashboardPage for improved loading indicators

Author: Inger.Liepelt

apps/dolly-frontend/src/main/js/src/components/bestilling/statusListe/BestillingProgresjon/BestillingProgresjon.less

@@ -27,6 +27,7 @@
 		flex-direction: column;
 		align-items: center;
 		padding-top: 10px;
+		margin-top: 30px;
 
 		div {
 			display: flex;

apps/dolly-frontend/src/main/js/src/components/bestilling/statusListe/BestillingProgresjon/BestillingProgresjon.tsx

@@ -3,6 +3,7 @@ import Loading from '@/components/ui/loading/Loading'
 import { ProgressBar } from '@navikt/ds-react'
 import NavButton from '@/components/ui/button/NavButton/NavButton'
 import Icon from '@/components/ui/icon/Icon'
+import DollySpinner from '@/components/ui/loading/DollySpinner'
 
 import './BestillingProgresjon.less'
 import { useBestillingStream } from '@/utils/hooks/useBestillingStream'
@@ -72,12 +73,15 @@ export const BestillingProgresjon = ({
 	}, [bestillingStatus])
 
 	useEffect(() => {
-		if (!sistOppdatert) return
-		const elapsed = (Date.now() - new Date(sistOppdatert).getTime()) / 1000
-		const grense = erOrganisasjon ? SECONDS_BEFORE_WARNING_ORG : SECONDS_BEFORE_WARNING
-		if (elapsed > grense) {
+		if (!sistOppdatert || timedOut) return
+		const grense = (erOrganisasjon ? SECONDS_BEFORE_WARNING_ORG : SECONDS_BEFORE_WARNING) * 1000
+		const remaining = grense - (Date.now() - new Date(sistOppdatert).getTime())
+		if (remaining <= 0) {
 			setTimedOut(true)
+			return
 		}
+		const timeoutId = setTimeout(() => setTimedOut(true), remaining)
+		return () => clearTimeout(timeoutId)
 	}, [sistOppdatert, erOrganisasjon])
 
 	useEffect(() => {
@@ -167,8 +171,19 @@ export const BestillingProgresjon = ({
 				</h5>
 				<span>{isFerdig ? 'Ferdigstiller bestilling' : progress.text}</span>
 			</div>
-			<div style={{ marginTop: '10px' }}>
+			<div style={{ position: 'relative', marginTop: '10px' }}>
 				<ProgressBar value={progress.percent} size="small" aria-label="Bestillingsfremgang" />
+				<div
+					style={{
+						position: 'absolute',
+						top: '50%',
+						left: `${progress.percent}%`,
+						transform: 'translate(-50%, -50%) scaleX(-1)',
+						pointerEvents: 'none',
+					}}
+				>
+					<DollySpinner size={50} label="" />
+				</div>
 			</div>
 			<div className="cancel-container">
 				{timedOut && !erOrganisasjon && (

apps/dolly-frontend/src/main/js/src/components/ui/loading/Loading.less

@@ -23,7 +23,8 @@
 
 .panel-loading-container {
 	padding: 15px;
-	border: 1px solid @color-bg-grey-border;
+	display: flex;
+	justify-content: center;
 }
 
 .loading-white {

apps/dolly-frontend/src/main/js/src/components/ui/loading/Loading.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import './Loading.less'
 import Spinner from './Spinner'
+import DollySpinner from './DollySpinner'
 
 interface Loading {
 	label?: string
@@ -15,25 +16,30 @@ export default ({ onlySpinner, size, className, label, panel, fullpage }: Loadin
 	if (onlySpinner) {
 		return <Spinner size={size || 18} />
 	}
-	const Loader = () => (
-		<div className={className ? className : 'loading-component'}>
-			{label || 'Laster'}
-			<Spinner size={size || 18} />
-		</div>
-	)
+	if (fullpage) {
+		return (
+			<div className="fullpage-loading-container">
+				<DollySpinner size={size || 160} label={label || 'Laster'} />
+			</div>
+		)
+	}
 	if (panel) {
 		return (
 			<div className="panel-loading-container">
-				<Loader />
+				<DollySpinner size={size || 120} label={label || 'Laster'} />
 			</div>
 		)
 	}
-	if (fullpage) {
+	if (label) {
 		return (
-			<div className="fullpage-loading-container">
-				<Loader />
+			<div className={className ? className : 'panel-loading-container'}>
+				<DollySpinner size={size || 80} label={label} />
 			</div>
 		)
 	}
-	return <Loader />
+	return (
+		<div className={className ? className : 'loading-component'}>
+			<Spinner size={size || 18} />
+		</div>
+	)
 }

apps/dolly-frontend/src/main/js/src/pages/adminPages/Dashboard/DashboardPage.tsx

@@ -9,7 +9,8 @@ import {
 	MonthlyTeamTrendSection,
 } from '@/pages/adminPages/Dashboard/dashboardMonthlySections'
 import { useErDollyAdmin } from '@/utils/DollyAdmin'
-import { Alert, Box, Loader, VStack } from '@navikt/ds-react'
+import { Alert, Box, VStack } from '@navikt/ds-react'
+import DollySpinner from '@/components/ui/loading/DollySpinner'
 import Highcharts from 'highcharts'
 import HighchartsAccessibility from 'highcharts/modules/accessibility'
 import { MONTH_SCOPE_ALL } from './dashboardUtils'
@@ -80,7 +81,7 @@ export default () => {
 
 				{d.isAnyLoading && (
 					<Box aria-busy="true" aria-live="polite">
-						<Loader size="xlarge" title="Laster dashboard-data..." />
+						<DollySpinner size={120} label="Laster dashboard-data..." />
 					</Box>
 				)}