diff --git a/.changeset/giant-files-yell.md b/.changeset/giant-files-yell.md new file mode 100644 index 000000000..6d41f3dac --- /dev/null +++ b/.changeset/giant-files-yell.md @@ -0,0 +1,5 @@ +--- +"@svenvw/fdm-app": minor +--- + +Add for pages with calculations (.e.g., nutrient advice, norms and balance) placeholders with skeletons so that user sees the page already and is notified that the content will arrive shortly diff --git a/fdm-app/app/components/blocks/balance/skeletons.tsx b/fdm-app/app/components/blocks/balance/skeletons.tsx new file mode 100644 index 000000000..d1b2299de --- /dev/null +++ b/fdm-app/app/components/blocks/balance/skeletons.tsx @@ -0,0 +1,77 @@ +import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "~/components/ui/card" +import { Skeleton } from "~/components/ui/skeleton" + +export function NitrogenBalanceCardSkeleton() { + return ( + + + + + + +
+

+ + + ) +} + +export function NitrogenBalanceChartSkeleton() { + return ( + + + + + + + + + + + + ) +} + +export function NitrogenBalanceFieldsSkeleton() { + return ( + + + + + + +

+ {[...Array(4)].map((_, i) => ( +
+ +
+ + +
+
+ +
+
+ ))} +
+ + + ) +} + +export function NitrogenBalanceFallback() { + return ( +
+
+ + + + +
+
+ + +
+
+ ) +} diff --git a/fdm-app/app/components/blocks/norms/field-norms.tsx b/fdm-app/app/components/blocks/norms/field-norms.tsx index 99791ae6e..f8d31b94d 100644 --- a/fdm-app/app/components/blocks/norms/field-norms.tsx +++ b/fdm-app/app/components/blocks/norms/field-norms.tsx @@ -36,7 +36,7 @@ export function FieldNorms({ fieldNorms, fieldOptions }: FieldNormsProps) { return (
-

Perceelniveau

+

Perceelsniveau

{fieldNorms.map((field) => ( +

+
+ + + + + +
+ + + + + + + +
+ + + + + + + +
+ + +
+
+ ) +} + +export function FieldNormsSkeleton() { + return ( +
+

+
+ {[...Array(3)].map((_, i) => ( + + +
+ + +
+ + +
+
+

+

+

+
+

+

+
+
+
+

+

+

+
+

+

+
+
+
+

+

+

+
+

+

+
+ + + ))} +
+

+ ) +} + +export function NormsFallback() { + return ( +
+ + + +
+ ) +} diff --git a/fdm-app/app/components/blocks/nutrient-advice/skeletons.tsx b/fdm-app/app/components/blocks/nutrient-advice/skeletons.tsx new file mode 100644 index 000000000..56607bd30 --- /dev/null +++ b/fdm-app/app/components/blocks/nutrient-advice/skeletons.tsx @@ -0,0 +1,58 @@ +import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card" +import { Progress } from "~/components/ui/progress" +import { Separator } from "~/components/ui/separator" + +export function NutrientCardSkeleton() { + return ( + + +
+
+
+ +
+
+ + +
+
+
+
+
+
+ + +
+ +
+
+ +
+ {[...Array(2)].map((_, i) => ( +
+
+

+

+

+
+

+

+

+
+ ))} +
+
+ + + ) +} + +export function NutrientAdviceFallback() { + return ( +
+ + + +
+ ) +} diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.balance.nitrogen.$b_id.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.balance.nitrogen.$b_id.tsx index 4b9eee720..83e05ba32 100644 --- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.balance.nitrogen.$b_id.tsx +++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.balance.nitrogen.$b_id.tsx @@ -23,7 +23,7 @@ import { } from "react-router" import { NitrogenBalanceChart } from "~/components/blocks/balance/nitrogen-chart" import NitrogenBalanceDetails from "~/components/blocks/balance/nitrogen-details" -import { LoadingSpinner } from "~/components/custom/loadingspinner" +import { NitrogenBalanceFallback } from "~/components/blocks/balance/skeletons" import { Button } from "~/components/ui/button" import { Card, @@ -33,8 +33,9 @@ import { CardHeader, CardTitle, } from "~/components/ui/card" -import { Skeleton } from "~/components/ui/skeleton" import { getSession } from "~/lib/auth.server" +import { Suspense } from "react" +import { Await } from "react-router" import { getTimeframe } from "~/lib/calendar" import { clientConfig } from "~/lib/config" import { fdm } from "~/lib/fdm.server" @@ -90,319 +91,303 @@ export async function loader({ request, params }: LoaderFunctionArgs) { // Get details of field const field = await getField(fdm, session.principal_id, b_id) - // Collect input data for nutrient balance calculation - let nitrogenBalanceInput = await collectInputForNitrogenBalance( + // Return promise directly for React Router v7 Suspense pattern + const nitrogenBalancePromise = collectInputForNitrogenBalance( fdm, session.principal_id, b_id_farm, timeframe, String(process.env.FDM_PUBLIC_DATA_URL), ) - - let nitrogenBalanceResult = null as NitrogenBalanceNumeric | null - let errorMessage = null as string | null - try { - nitrogenBalanceResult = - await calculateNitrogenBalance(nitrogenBalanceInput) - - nitrogenBalanceResult = nitrogenBalanceResult.fields.find( - (field) => field.b_id === b_id, - ) - - nitrogenBalanceInput = nitrogenBalanceInput.fields.find( - (field) => field.field.b_id === b_id, - ) - } catch (error) { - errorMessage = String(error).replace("Error: ", "") - } + .then(async (input) => { + const result = await calculateNitrogenBalance(input) + return { + input: input.fields.find( + (field: { field: { b_id: string } }) => + field.field.b_id === b_id, + ), + result: result.fields.find( + (field: { b_id: string }) => field.b_id === b_id, + ), + errorMessage: null, + } + }) + .catch((error) => ({ + input: null, + result: null, + errorMessage: String(error).replace("Error: ", ""), + })) return { - nitrogenBalanceInput: nitrogenBalanceInput, - nitrogenBalanceResult: nitrogenBalanceResult, + nitrogenBalanceResult: nitrogenBalancePromise, field: field, farm: farm, - errorMessage: errorMessage, } } export default function FarmBalanceNitrogenFieldBlock() { const loaderData = useLoaderData() const location = useLocation() - const navigation = useNavigation() const page = location.pathname - const isLoading = navigation.state === "loading" - const calendar = useCalendarStore((state) => state.calendar) - const { - nitrogenBalanceInput, - nitrogenBalanceResult, - field, - farm, - errorMessage, - } = loaderData + const { nitrogenBalanceResult, field, farm } = loaderData return (
- {nitrogenBalanceResult ? ( - <> -
- - - - Overschot / Doel (Perceel) - - - - -
- {isLoading ? ( - - ) : ( -
-

- {`${nitrogenBalanceResult.balance} / ${nitrogenBalanceResult.target}`} -

- {nitrogenBalanceResult.balance <= - nitrogenBalanceResult.target ? ( - - ) : ( - - )} -
- )} -
-

- kg N / ha -

- - - - - - Aanvoer - - - - -
- {isLoading ? ( - - ) : ( - nitrogenBalanceResult.supply.total - )} + }> + + {(resolvedNitrogenBalanceResult) => { + const { input, result, errorMessage } = + resolvedNitrogenBalanceResult + if (!input) { + return ( +
+ + + Ongeldig jaar + + +
+

+ Dit perceel was niet in + gebruik voor dit jaar. Als + dit perceel wel in gebruik + was, werk dan de startdatum + bij in de + perceelsinstelling. +

+
+ + + + + + +
-

- kg N / ha -

- - - - - - Afvoer - - - - -
- {isLoading ? ( - - ) : ( - nitrogenBalanceResult.removal.total - )} -
-

- kg N / ha -

- - - - - - Emissie - - - - -
- {isLoading ? ( - - ) : ( - nitrogenBalanceResult.volatilization - .total - )} -
-

- kg N / ha -

- - -
-
- - - Balans - - De stikstofbalans voor {field.b_name} van{" "} - {farm.b_name_farm}. De balans is het - verschil tussen de totale aanvoer, afvoer en - emissie van stikstof. Een positieve balans - betekent een overschot aan stikstof, een - negatieve balans een tekort. - - - - {isLoading ? ( -
- -
- ) : ( - - )} - - - - - Posten - - - -
- {isLoading ? ( - [...Array(5)].map((_, index) => { - return ( -
-
- -
-
- + ) + } + + if (errorMessage) { + return ( +
+ + + + Helaas is het niet mogelijk om + je balans uit te rekenen + + + + {!errorMessage ? ( +
+

+ Er is een onbekende fout + opgetreden. Probeer + opnieuw of neem contact + op met Ondersteuning. +

+
+ ) : errorMessage.match( + /Missing required soil parameters/, + ) ? ( +
+

+ Voor niet alle percelen + zijn de benodigde + bodemparameters bekend: +

+
+
    + {errorMessage.match( + /a_n_rt/, + ) ? ( +
  • + Totaal + stikstofgehalte +
    • + ) : null} + {errorMessage.match( + /b_soiltype_agr/, + ) ? ( +
  • + Agrarisch + bodemtype +
    • + ) : null} + {errorMessage.match( + /a_c_of|a_som_loi/, + ) ? ( +
  • + Organische + stofgehalte +
    • + ) : null} +
+
+ ) : ( +
+

+ Er is helaas wat + misgegaan. Probeer + opnieuw of neem contact + op met Ondersteuning en + deel de volgende + foutmelding: +

+
+ 
+                                                            {JSON.stringify(
+                                                                {
+                                                                    message:
+                                                                        errorMessage,
+                                                                    page: page,
+                                                                    timestamp:
+                                                                        new Date(),
+                                                                },
+                                                                null,
+                                                                2,
+                                                            )}
+
- ) - }) - ) : ( - - )} -
- - -
- - ) : !nitrogenBalanceInput ? ( -
- - - Ongeldig jaar - - -
-

- Dit perceel was niet in gebruik voor dit - jaar. Als dit perceel wel in gebruik was, - werk dan de startdatum bij in de - perceelsinstelling. -

-
- - - - - - - -
- ) : ( -
- - - - Helaas is het niet mogelijk om je balans uit te - rekenen - - - - {!errorMessage ? ( -
-

- Er is een onbekende fout opgetreden. - Probeer opnieuw of neem contact op met - Ondersteuning. -

+ )} + +
- ) : errorMessage.match( - /Missing required soil parameters/, - ) ? ( -
-

- Voor niet alle percelen zijn de - benodigde bodemparameters bekend: -

-
-
    - {errorMessage.match(/a_n_rt/) ? ( -
  • Totaal stikstofgehalte
    • - ) : null} - {errorMessage.match( - /b_soiltype_agr/, - ) ? ( -
  • Agrarisch bodemtype
    • - ) : null} - {errorMessage.match( - /a_c_of|a_som_loi/, - ) ? ( -
  • Organische stofgehalte
    • - ) : null} -
+ ) + } + + return ( + <> +
+ + + + Overschot / Doel (Perceel) + + + + +
+
+

+ {`${result.balance} / ${result.target}`} +

+ {result.balance <= + result.target ? ( + + ) : ( + + )} +
+
+

+ kg N / ha +

+ + + + + + Aanvoer + + + + +
+ {result.supply.total} +
+

+ kg N / ha +

+ + + + + + Afvoer + + + + +
+ {result.removal.total} +
+

+ kg N / ha +

+ + + + + + Emissie + + + + +
+ {result.volatilization.total} +
+

+ kg N / ha +

+ +
- ) : ( -
-

- Er is helaas wat misgegaan. Probeer - opnieuw of neem contact op met - Ondersteuning en deel de volgende - foutmelding: -

-
- 
-                                            {JSON.stringify(
-                                                {
-                                                    message: errorMessage,
-                                                    page: page,
-                                                    timestamp: new Date(),
-                                                },
-                                                null,
-                                                2,
-                                            )}
-
-
+
+ + + Balans + + De stikstofbalans voor{" "} + {field.b_name} van{" "} + {farm.b_name_farm}. De balans is + het verschil tussen de totale + aanvoer, afvoer en emissie van + stikstof. Een positieve balans + betekent een overschot aan + stikstof, een negatieve balans + een tekort. + + + + + + + + + Posten + + + +
+ +
+ +
- )} - - -
- )} + + ) + }} + +
) } diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.balance.nitrogen._index.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.balance.nitrogen._index.tsx index 840185fa7..dd0090177 100644 --- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.balance.nitrogen._index.tsx +++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.balance.nitrogen._index.tsx @@ -22,7 +22,7 @@ import { useNavigation, } from "react-router" import { NitrogenBalanceChart } from "~/components/blocks/balance/nitrogen-chart" -import { LoadingSpinner } from "~/components/custom/loadingspinner" +import { NitrogenBalanceFallback } from "~/components/blocks/balance/skeletons" import { Card, CardContent, @@ -30,8 +30,9 @@ import { CardHeader, CardTitle, } from "~/components/ui/card" -import { Skeleton } from "~/components/ui/skeleton" import { getSession } from "~/lib/auth.server" +import { Suspense } from "react" +import { Await } from "react-router" import { getTimeframe } from "~/lib/calendar" import { clientConfig } from "~/lib/config" import { fdm } from "~/lib/fdm.server" @@ -109,276 +110,245 @@ export default function FarmBalanceNitrogenOverviewBlock() { const location = useLocation() const navigation = useNavigation() const page = location.pathname - const isLoading = navigation.state === "loading" - const { nitrogenBalanceResult, farm, fields, errorMessage } = loaderData const fieldsMap = new Map(fields.map((f) => [f.b_id, f])) return (
- {nitrogenBalanceResult ? ( - <> -
- - - - Overschot / Doel (Bedrijf) - - - - -
- {isLoading ? ( - - ) : ( -
-

- {`${nitrogenBalanceResult.balance} / ${nitrogenBalanceResult.target}`} -

- {nitrogenBalanceResult.balance <= - nitrogenBalanceResult.target ? ( - + }> + + {(resolvedNitrogenBalanceResult) => { + if (errorMessage) { + return ( +
+ + + + Helaas is het niet mogelijk om je balans uit te + rekenen + + + + {!errorMessage ? ( +
+

+ Er is een onbekende fout opgetreden. + Probeer opnieuw of neem contact op met + Ondersteuning. +

+
+ ) : errorMessage.match( + /Missing required soil parameters/, + ) ? ( +
+

+ Voor niet alle percelen zijn de + benodigde bodemparameters bekend: +

+
+
    + {errorMessage.match(/a_n_rt/) ? ( +
  • Totaal stikstofgehalte
    • + ) : null} + {errorMessage.match( + /b_soiltype_agr/, + ) ? ( +
  • Agrarisch bodemtype
    • + ) : null} + {errorMessage.match( + /a_c_of|a_som_loi/, + ) ? ( +
  • Organische stofgehalte
    • + ) : null} +
+
) : ( - +
+

+ Er is helaas wat misgegaan. Probeer + opnieuw of neem contact op met + Ondersteuning en deel de volgende + foutmelding: +

+
+ 
+                                                            {JSON.stringify(
+                                                                {
+                                                                    message: errorMessage,
+                                                                    page: page,
+                                                                    timestamp: new Date(),
+                                                                },
+                                                                null,
+                                                                2,
+                                                            )}
+
+
+
)} -
- )} -
-

- kg N / ha -

- - - - - - Aanvoer - - - - -
- {isLoading ? ( - - ) : ( - nitrogenBalanceResult.supply - )} -
-

- kg N / ha -

- - - - - - Afvoer - - - - -
- {isLoading ? ( - - ) : ( - nitrogenBalanceResult.removal - )} + +
-

- kg N / ha -

- - - - - - Emissie - - - - -
- {isLoading ? ( - - ) : ( - nitrogenBalanceResult.volatilization - )} -
-

- kg N / ha -

- - -
-
- - - Balans - - De stikstofbalans voor alle percelen van{" "} - {farm.b_name_farm}. De balans is het - verschil tussen de totale aanvoer, afvoer en - emissie van stikstof. Een positieve balans - betekent een overschot aan stikstof, een - negatieve balans een tekort. - - - - {isLoading ? ( -
- -
- ) : ( - - )} - {/* */} - - - - - Percelen - - - -
- {isLoading - ? fields.map((field) => { - return ( -
-
- -
-
- -
-
- ) - }) - : nitrogenBalanceResult.fields.map( - (field) => { - const fieldData = - fieldsMap.get(field.b_id) - return ( -
- {field.balance <= - field.target ? ( - - ) : ( - - )} + ) + } -
- -

- { - fieldData?.b_name - } -

- -

- { - fieldData?.b_area - }{" "} - ha -

-
-
- {field.balance} /{" "} - {field.target} -
-
- ) - }, - )} -
- - -
- - ) : ( -
- - - - Helaas is het niet mogelijk om je balans uit te - rekenen - - - - {!errorMessage ? ( -
-

- Er is een onbekende fout opgetreden. - Probeer opnieuw of neem contact op met - Ondersteuning. -

-
- ) : errorMessage.match( - /Missing required soil parameters/, - ) ? ( -
-

- Voor niet alle percelen zijn de - benodigde bodemparameters bekend: -

-
-
    - {errorMessage.match(/a_n_rt/) ? ( -
  • Totaal stikstofgehalte
    • - ) : null} - {errorMessage.match( - /b_soiltype_agr/, - ) ? ( -
  • Agrarisch bodemtype
    • - ) : null} - {errorMessage.match( - /a_c_of|a_som_loi/, - ) ? ( -
  • Organische stofgehalte
    • - ) : null} -
+ return ( + <> +
+ + + + Overschot / Doel (Bedrijf) + + + + +
+
+

+ {`${resolvedNitrogenBalanceResult.balance} / ${resolvedNitrogenBalanceResult.target}`} +

+ {resolvedNitrogenBalanceResult.balance <= + resolvedNitrogenBalanceResult.target ? ( + + ) : ( + + )} +
+
+

+ kg N / ha +

+ + + + + + Aanvoer + + + + +
+ {resolvedNitrogenBalanceResult.supply} +
+

+ kg N / ha +

+ + + + + + Afvoer + + + + +
+ {resolvedNitrogenBalanceResult.removal} +
+

+ kg N / ha +

+ + + + + + Emissie + + + + +
+ {resolvedNitrogenBalanceResult.volatilization} +
+

+ kg N / ha +

+ +
- ) : ( -
-

- Er is helaas wat misgegaan. Probeer - opnieuw of neem contact op met - Ondersteuning en deel de volgende - foutmelding: -

-
- 
-                                            {JSON.stringify(
-                                                {
-                                                    message: errorMessage,
-                                                    page: page,
-                                                    timestamp: new Date(),
-                                                },
-                                                null,
-                                                2,
-                                            )}
-
-
+
+ + + Balans + + De stikstofbalans voor alle percelen van{" "} + {farm.b_name_farm}. De balans is het + verschil tussen de totale aanvoer, afvoer en + emissie van stikstof. Een positieve balans + betekent een overschot aan stikstof, een + negatieve balans een tekort. + + + + + + + + + Percelen + + + +
+ {resolvedNitrogenBalanceResult.fields.map( + (field: NitrogenBalanceNumeric['fields'][number]) => { + const fieldData = + fieldsMap.get(field.b_id) + return ( +
+ {field.balance <= + field.target ? ( + + ) : ( + + )} + +
+ +

+ { + fieldData?.b_name + } +

+ +

+ { + fieldData?.b_area + }{" "} + ha +

+
+
+ {field.balance} /{" "} + {field.target} +
+
+ ) + }, + )} +
+ +
- )} - - -
- )} + + ) + }} + +
) } diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsx index 8452c26cf..26e27cd18 100644 --- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsx +++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.tsx @@ -51,6 +51,7 @@ import { handleActionError, handleLoaderError } from "~/lib/error"; import { fdm } from "~/lib/fdm.server"; import { extractFormValuesFromRequest } from "~/lib/form"; import { useCalendarStore } from "~/store/calendar"; +import { clientConfig } from "~/lib/config"; // Meta export const meta: MetaFunction = () => { diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.norms.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.norms.tsx index a45686810..421597e5b 100644 --- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.norms.tsx +++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.norms.tsx @@ -29,6 +29,9 @@ import { AlertTriangle } from "lucide-react" import { Button } from "../components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card" import { HeaderNorms } from "../components/blocks/header/norms" +import { NormsFallback } from "~/components/blocks/norms/skeletons" +import { Suspense } from "react" +import { Await } from "react-router" // Meta export const meta: MetaFunction = () => { @@ -211,90 +214,96 @@ export default function FarmNormsBlock() { "Bekijk de gebruiksnormen voor je bedrijf en percelen." } /> - {/* Disclaimer */} - {loaderData.farmNorms && loaderData.fieldNorms ? ( -
- - - - Disclaimer: Deze getallen zijn - uitsluitend bedoeld voor informatieve - doeleinden. De getoonde gebruiksnormen zijn - indicatief en dienen te worden geverifieerd voor - juridische naleving. Raadpleeg altijd de - officiële RVO-publicaties en uw adviseur voor - definitieve normen. - - -
- ) : null} + }> + + {([farmNorms, fieldNorms]) => { + if (loaderData.errorMessage) { + return ( +
+ + + + Helaas is het niet mogelijk om je + gebruiksnormen uit te rekenen + + + +
+

+ Er is onverwacht wat misgegaan. + Probeer opnieuw of neem contact op + met Ondersteuning en deel de + volgende foutmelding: +

+
+ 
+                                                            {JSON.stringify(
+                                                                {
+                                                                    message:
+                                                                        loaderData.errorMessage,
+                                                                    page: page,
+                                                                    timestamp: new Date(),
+                                                                },
+                                                                null,
+                                                                2,
+                                                            )}
+
+
+
+ + +
+ ) + } + + if (farmNorms && fieldNorms) { + return ( +
+ + + + Disclaimer: Deze getallen zijn + uitsluitend bedoeld voor informatieve + doeleinden. De getoonde gebruiksnormen zijn + indicatief en dienen te worden geverifieerd voor + juridische naleving. Raadpleeg altijd de + officiële RVO-publicaties en uw adviseur voor + definitieve normen. + + + + + +
+ ) + } -
- {loaderData.errorMessage ? ( -
- - - - Helaas is het niet mogelijk om je - gebruiksnormen uit te rekenen - - - -
-

- Er is onverwacht wat misgegaan. - Probeer opnieuw of neem contact op - met Ondersteuning en deel de - volgende foutmelding: + return ( +

+
+

+ Helaas, nog geen gebruiksnormen beschikbaar + voor {loaderData.calendar} +

+

+ Op dit moment kunnen we alleen nog de + gebruiksnormen voor 2025 berekenen en + weergeven.

-
- 
-                                                {JSON.stringify(
-                                                    {
-                                                        message:
-                                                            loaderData.errorMessage,
-                                                        page: page,
-                                                        timestamp: new Date(),
-                                                    },
-                                                    null,
-                                                    2,
-                                                )}
-
-
+ + +
- - -
- ) : loaderData.farmNorms && loaderData.fieldNorms ? ( - <> - - - - - ) : ( -
-
-

- Helaas, nog geen gebruiksnormen beschikbaar - voor {loaderData.calendar} -

-

- Op dit moment kunnen we alleen nog de - gebruiksnormen voor 2025 berekenen en - weergeven. -

- - - -
-
- )} -
+
+ ) + }} + + ) diff --git a/fdm-app/app/routes/farm.$b_id_farm.$calendar.nutrient_advice.$b_id.tsx b/fdm-app/app/routes/farm.$b_id_farm.$calendar.nutrient_advice.$b_id.tsx index 82cb7a790..823dbbdd3 100644 --- a/fdm-app/app/routes/farm.$b_id_farm.$calendar.nutrient_advice.$b_id.tsx +++ b/fdm-app/app/routes/farm.$b_id_farm.$calendar.nutrient_advice.$b_id.tsx @@ -7,11 +7,12 @@ import { getField, } from "@svenvw/fdm-core" import { Tally1, Tally2, Tally3 } from "lucide-react" +import { Suspense } from "react" import { + Await, type LoaderFunctionArgs, type MetaFunction, useLoaderData, - useNavigation, } from "react-router" import { NutrientCard } from "~/components/blocks/nutrient-advice/cards" import { @@ -21,7 +22,10 @@ import { } from "~/components/blocks/nutrient-advice/kpi" import { getNutrientsDescription } from "~/components/blocks/nutrient-advice/nutrients" import type { NutrientDescription } from "~/components/blocks/nutrient-advice/types" -import { LoadingSpinner } from "~/components/custom/loadingspinner" +import { + NutrientAdviceFallback, + NutrientCardSkeleton, +} from "~/components/blocks/nutrient-advice/skeletons" import { Card, CardContent, @@ -118,7 +122,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) { const b_lu_catalogue = cultivations[0].b_lu_catalogue // Request nutrient advice - const nutrientAdvice = await getNutrientAdvice( + const nutrientAdvice = getNutrientAdvice( b_lu_catalogue, field.b_centroid, currentSoilData, @@ -150,7 +154,6 @@ export default function FieldNutrientAdviceBlock() { fertilizers, calendar, } = useLoaderData() - const navigation = useNavigation() const primaryNutrients = nutrientsDescription.filter( (item: NutrientDescription) => item.type === "primary", @@ -161,9 +164,9 @@ export default function FieldNutrientAdviceBlock() { const traceNutrients = nutrientsDescription.filter( (item: NutrientDescription) => item.type === "trace", ) - // console.log(primaryNutrients) + return ( -
+
@@ -176,33 +179,37 @@ export default function FieldNutrientAdviceBlock() { - {navigation.state === "loading" ? ( -
- -
- ) : ( -
- {primaryNutrients.map( - (nutrient: NutrientDescription) => ( - - ), - )} -
- )} +
+ ( + + ))} + > + + {(nutrientAdvice) => + primaryNutrients.map( + (nutrient: NutrientDescription) => ( + + ), + ) + } + + +
@@ -236,33 +243,37 @@ export default function FieldNutrientAdviceBlock() { - {navigation.state === "loading" ? ( -
- -
- ) : ( -
- {secondaryNutrients.map( - (nutrient: NutrientDescription) => ( - - ), - )} -
- )} +
+ ( + + ))} + > + + {(nutrientAdvice) => + secondaryNutrients.map( + (nutrient: NutrientDescription) => ( + + ), + ) + } + + +
@@ -277,35 +288,39 @@ export default function FieldNutrientAdviceBlock() { - {navigation.state === "loading" ? ( -
- -
- ) : ( -
- {traceNutrients.map( - (nutrient: NutrientDescription) => ( - - ), - )} -
- )} +
+ ( + + ))} + > + + {(nutrientAdvice) => + traceNutrients.map( + (nutrient: NutrientDescription) => ( + + ), + ) + } + + +
) -} +} \ No newline at end of file