optime load time and fix salary label

Author: Markusplay

src/app/(default)/profile/[teacherId]/components/WorkloadDetails/StackedBarChart.tsx

@@ -4,7 +4,7 @@ import React, { useMemo } from 'react';
 import SectionTitle from '@/components/common/SectionTitle';
 import { EvaluationWorkload } from '@/types/intellect';
 import { LegendItem } from './LegendItem';
-import { filterWorkloadsByPeriod } from './utils';
+import { filterWorkloadsByPeriod, getSalaryLabel } from './utils';
 
 interface Props {
     workloadsByYearRange: Record<string, EvaluationWorkload[]>;
@@ -90,12 +90,12 @@ export const StackedBarChart = ({
         },
     ] as const;
 
-    const salary = workloadsByYearRange[selectedYear].toSorted((a,b)=>b.salary - a.salary)[0].salary.toFixed(2)
-
+    const salary = workloadsByYearRange[selectedYear].toSorted((a, b) => b.salary - a.salary)[0].salary.toFixed(2);
+    const salaryLabel = getSalaryLabel(parseFloat(salary));
     return (
         <div className="mt-8">
             <SectionTitle className="mb-4 uppercase text-primary">
-                ВИКОНАННЯ НОРМИ: {yearRange} ({salary})
+                ВИКОНАННЯ НОРМИ: {yearRange} ({salaryLabel})
             </SectionTitle>
             <div className="relative">
                 <div className="flex overflow-hidden rounded-md h-12">

src/app/(default)/profile/[teacherId]/components/WorkloadDetails/WorkloadContainer.tsx

@@ -0,0 +1,12 @@
+import { WorkloadDetails } from '@/app/(default)/profile/[teacherId]/components/WorkloadDetails/WorkloadDetails';
+import React, { FC } from 'react';
+import { getEvaluationWorkloads, getRatings, getTeacherByTeacherId } from '@/api/teacher';
+
+interface Props {
+    teacherId: string;
+}
+
+export const WorkloadContainer: FC<Props> = async ({ teacherId }) => {
+    const [ratings, workloads] = await Promise.all([getRatings(teacherId), getEvaluationWorkloads(teacherId)]);
+    return <WorkloadDetails workloads={workloads} ratings={ratings} />;
+};

src/app/(default)/profile/[teacherId]/components/WorkloadDetails/utils.ts

@@ -95,3 +95,11 @@ export const filterWorkloadsByPeriod = (
 
     return workloads;
 };
+
+export const getSalaryLabel = (salary: number) => {
+    if (salary === 1) {
+        return "Повна ставка"
+    }
+
+    return `${salary} ставки`
+}

src/app/(default)/profile/[teacherId]/page.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import type { Metadata } from 'next';
 import { getEvaluationWorkloads, getRatings, getTeacherByTeacherId } from '@/api/teacher';
 import { API_BASE_URL } from '@/api/index';
@@ -18,6 +18,8 @@ import {
 } from '@/components/ui/breadcrumb';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { WorkloadDetails } from '@/app/(default)/profile/[teacherId]/components/WorkloadDetails/WorkloadDetails';
+import { WorkloadContainer } from '@/app/(default)/profile/[teacherId]/components/WorkloadDetails/WorkloadContainer';
+import { Loader } from 'lucide-react';
 
 const generateMetaDescription = (teacher: Lecturer | null): string => {
     if (!teacher) {
@@ -70,11 +72,7 @@ export async function generateMetadata({ params }: { params: Promise<{ teacherId
 
 export default async function TeacherProfilePage({ params }: { params: Promise<{ teacherId: string }> }) {
     const { teacherId } = await params;
-    const [teacher, ratings, workloads] = await Promise.all([
-        getTeacherByTeacherId(teacherId),
-        getRatings(teacherId),
-        getEvaluationWorkloads(teacherId),
-    ]);
+    const teacher = await getTeacherByTeacherId(teacherId)
 
     return (
         <section className="pt-12 pb-110">
@@ -116,7 +114,9 @@ export default async function TeacherProfilePage({ params }: { params: Promise<{
                             <ProfileDetails teacherInfo={teacher} />
                         </TabsContent>
                         <TabsContent value="rating">
-                            <WorkloadDetails workloads={workloads} ratings={ratings} />
+                            <Suspense fallback={<Loader />}>
+                                <WorkloadContainer teacherId={teacherId} />
+                            </Suspense>
                         </TabsContent>
                     </Tabs>
                 </div>