diff --git a/plugins/scaffolder/src/next/OngoingTask/TaskSteps/StepTime.tsx b/plugins/scaffolder/src/next/OngoingTask/TaskSteps/StepTime.tsx index 2ec89f385a..653fe6e942 100644 --- a/plugins/scaffolder/src/next/OngoingTask/TaskSteps/StepTime.tsx +++ b/plugins/scaffolder/src/next/OngoingTask/TaskSteps/StepTime.tsx @@ -13,11 +13,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useCallback, useMemo, useState } from 'react'; +import React, { useCallback, useState } from 'react'; import useInterval from 'react-use/lib/useInterval'; import { DateTime, Interval } from 'luxon'; import humanizeDuration from 'humanize-duration'; import { Typography } from '@material-ui/core'; +import { useMountEffect } from '@react-hookz/web'; export const StepTime = (props: { step: { @@ -48,7 +49,7 @@ export const StepTime = (props: { setTime(humanizeDuration(formatted, { round: true })); }, [step.endedAt, step.startedAt]); - useMemo(() => calculate(), [calculate]); + useMountEffect(() => calculate()); useInterval(() => !step.endedAt && calculate(), 1000); diff --git a/plugins/scaffolder/src/next/Router/Router.tsx b/plugins/scaffolder/src/next/Router/Router.tsx index 0ca9e452cd..049579e16c 100644 --- a/plugins/scaffolder/src/next/Router/Router.tsx +++ b/plugins/scaffolder/src/next/Router/Router.tsx @@ -76,7 +76,11 @@ export type NextRouterProps = { */ export const Router = (props: PropsWithChildren) => { const { - components: { TemplateCardComponent, TemplateOutputsComponent } = {}, + components: { + TemplateCardComponent, + TemplateOutputsComponent, + TaskPageComponent = OngoingTask, + } = {}, } = props; const outlet = useOutlet() || props.children; const customFieldExtensions = @@ -121,7 +125,9 @@ export const Router = (props: PropsWithChildren) => { + } /> } />