fix endless skeleton for new report; add button spinners

Author: Victoria Ivanova

frontend/src/components/SaveButton/SaveButton.tsx

@@ -3,16 +3,25 @@ import React from "react";
 interface SaveButtonProps {
   isChanged: boolean;
   onSave: () => void;
+  isLoading: boolean;
 }
 
-const SaveButton: React.FC<SaveButtonProps> = ({ isChanged, onSave }) => {
+const SaveButton: React.FC<SaveButtonProps> = ({
+  isChanged,
+  onSave,
+  isLoading,
+}) => {
   return (
     <button
       onClick={onSave}
       className={`btn btn-info px-4 py-2`}
       disabled={!isChanged}
     >
-      Сохранить
+      {isLoading ? (
+        <span className="loading loading-spinner"></span>
+      ) : (
+        "Сохранить"
+      )}
     </button>
   );
 };

frontend/src/pages/Report/Report.tsx

@@ -91,13 +91,13 @@ const ReportPage = () => {
 
   return (
     <div className="reports-wrapper">
-      <ReportHeader />
+      <ReportHeader isNewReport={isNewReport} />
       {bugsIds.length ? (
         bugsIds.map((id) => (
-          <Bug key={id} reportId={reportForm.id} bugId={id} />
+          <Bug key={id} bugId={id} reportId={reportForm.id} />
         ))
       ) : (
-        <Bug />
+        <Bug isNewReport />
       )}
 
       {!isNewReport && bugsIds.length > 0 && !isExists && (

frontend/src/pages/Report/components/Bug/Bug.tsx

@@ -9,36 +9,44 @@ import {
   updateBugEvent,
   resetBug,
   updateBugApiEvent,
+  $bugRequestState,
 } from "@/store/bugs";
 import { $reportRequestState } from "@/store/report";
 import { $attachmentsByBugId } from "@/store/attachments";
 import "./Bug.css";
 import CancelButton from "@/components/CancelButton/CancelButton";
 import SaveButton from "@/components/SaveButton/SaveButton";
 import Dropdown from "@/components/Dropdown/Dropdown";
-import { BugStatuses } from "@/const";
+import { BugStatuses, RequestStates } from "@/const";
 import Chat from "./components/Chat/Chat";
 import { uploadAttachmentFx } from "@/store/attachments";
 import { Bug as BugType } from "@/types/bug";
 import Result from "./components/Result/Result";
 import { ChangeEvent } from "react";
 import Heading from "./components/Heading/Heading";
-import { RequestStates } from "../../../../const/index";
 
 type BugProps = {
   reportId?: number | null;
+  isNewReport?: boolean;
   bugId?: number;
 };
 
-const Bug = ({ reportId, bugId }: BugProps) => {
-  const [updateBugData, reset, updateBugApi, createBugApi, uploadAttachment] =
-    useUnit([
-      updateBugEvent,
-      resetBug,
-      updateBugApiEvent,
-      createBugEventByApi,
-      uploadAttachmentFx,
-    ]);
+const Bug = ({ reportId, isNewReport, bugId }: BugProps) => {
+  const [
+    updateBugData,
+    reset,
+    updateBugApi,
+    createBugApi,
+    uploadAttachment,
+    bugRequestState,
+  ] = useUnit([
+    updateBugEvent,
+    resetBug,
+    updateBugApiEvent,
+    createBugEventByApi,
+    uploadAttachmentFx,
+    $bugRequestState,
+  ]);
 
   const [newBugData, updateNewBugData] = useUnit([$newBugStore, updateNewBug]);
 
@@ -72,7 +80,6 @@ const Bug = ({ reportId, bugId }: BugProps) => {
   });
 
   const isNewBug = !bug.id;
-  const isNewReport = !reportId;
 
   const isBugChanged = isNewBug
     ? newBugData.receive !== "" && newBugData.expect !== ""
@@ -145,7 +152,7 @@ const Bug = ({ reportId, bugId }: BugProps) => {
           )}
 
           {/* Селект статуса (только для существующего бага) */}
-          {!isNewBug && reportRequestState !== RequestStates.PENDING && (
+          {!isNewBug && reportRequestState === RequestStates.DONE && (
             <Dropdown
               className="max-w-[150px]"
               onChange={(selected) => {
@@ -197,7 +204,11 @@ const Bug = ({ reportId, bugId }: BugProps) => {
               }
             }}
           />
-          <SaveButton isChanged={isBugChanged} onSave={handleSave} />
+          <SaveButton
+            isChanged={isBugChanged}
+            onSave={handleSave}
+            isLoading={bugRequestState === RequestStates.PENDING}
+          />
         </div>
       )}
       {!isNewBug && (

frontend/src/pages/Report/components/Bug/components/Heading/Heading.tsx

@@ -4,11 +4,15 @@ type Props = {
 };
 
 const Heading = ({ isNewBug, bugId }: Props) => {
-  return isNewBug ? (
-    <span className="text-2xl">Новый баг</span>
-  ) : (
+  return (
     <span className="text-2xl">
-      Баг<span className="text-gray-300">#{bugId}</span>
+      {!isNewBug ? (
+        <>
+          Баг <span className="text-gray-300">#{bugId}</span>
+        </>
+      ) : (
+        "Новый баг"
+      )}
     </span>
   );
 };

frontend/src/pages/Report/components/ReportHeader/ReportHeader.tsx

@@ -5,7 +5,6 @@ import {
   updateResponsible,
   resetReport,
   $isReportChanged,
-  $isNewReport,
   $reportRequestState,
   updateStatus,
   updateReportEvent,
@@ -29,15 +28,14 @@ const autocompleteUsers = async (searchString: string) => {
   }));
 };
 
-const ReportHeader = () => {
+const ReportHeader = ({ isNewReport }: { isNewReport: boolean }) => {
   const [
     reportForm,
     setTitle,
     setResponsibleId,
     isReportChanged,
     reportRequestState,
     reset,
-    isNewReport,
     setUpdateStatus,
     updateReport,
   ] = useUnit([
@@ -47,7 +45,6 @@ const ReportHeader = () => {
     $isReportChanged,
     $reportRequestState,
     resetReport,
-    $isNewReport,
     updateStatus,
     updateReportEvent,
   ]);
@@ -66,7 +63,7 @@ const ReportHeader = () => {
       }`}
     >
       <div className="flex justify-between items-center">
-        {reportRequestState !== RequestStates.DONE ? (
+        {reportRequestState !== RequestStates.DONE && !isNewReport ? (
           <div className="skeleton min-h-[40px]" />
         ) : (
           <span className="text-2xl">
@@ -97,7 +94,7 @@ const ReportHeader = () => {
       </div>
       <div>
         <div className="text-xs font-semibold mt-1 mb-1">Заголовок</div>
-        {reportRequestState !== RequestStates.DONE ? (
+        {reportRequestState !== RequestStates.DONE && !isNewReport ? (
           <div className="skeleton input w-full" />
         ) : (
           <input
@@ -115,7 +112,7 @@ const ReportHeader = () => {
         <div>
           <div className="text-xs font-semibold mb-1">Ответственный</div>
           <div className="flex gap-4 items-center">
-            {reportRequestState !== RequestStates.DONE ? (
+            {reportRequestState !== RequestStates.DONE && !isNewReport ? (
               <div className="skeleton input shrink-0 min-w-[288px]" />
             ) : (
               <Autosuggest
@@ -129,7 +126,7 @@ const ReportHeader = () => {
               />
             )}
             <div className="participants-wrapper">
-              {reportRequestState !== RequestStates.DONE ? (
+              {reportRequestState !== RequestStates.DONE && !isNewReport ? (
                 <ParticipantsSkeleton />
               ) : (
                 !!reportForm.participants?.length &&
@@ -146,7 +143,11 @@ const ReportHeader = () => {
         {!isNewReport && isReportChanged && reportForm.responsible?.id && (
           <div className="flex gap-2 justify-end">
             <CancelButton isChanged={isReportChanged} onReset={reset} />
-            <SaveButton isChanged={isReportChanged} onSave={updateReport} />
+            <SaveButton
+              isLoading={reportRequestState === RequestStates.PENDING}
+              isChanged={isReportChanged}
+              onSave={updateReport}
+            />
           </div>
         )}
       </div>

frontend/src/store/bugs.ts

@@ -3,6 +3,7 @@ import { createBugFx } from "./newBug";
 import { $initialReportForm, clearReport } from "./report";
 import { updateBugApi } from "@/api/reports/bug";
 import { Bug, UpdateBugParameters } from "@/types/bug";
+import { RequestStates } from "@/const";
 
 type UpdateBugParams = {
   reportId: number;
@@ -101,6 +102,15 @@ export const $bugsIds = createStore<number[]>([])
   )
   .reset(clearReport);
 
+export const $bugRequestState = createStore(RequestStates.IDLE);
+$bugRequestState
+  .on(updateBugFx.pending, (_, state) => {
+    return state ? RequestStates.PENDING : RequestStates.DONE;
+  })
+  .on(updateBugFx.doneData, () => {
+    return RequestStates.DONE;
+  });
+
 sample({
   source: updateBugApiEvent,
   fn: (bug) => ({

frontend/src/store/report.ts

@@ -85,12 +85,6 @@ export const updateTitle = createEvent<string>();
 export const updateStatus = createEvent<number>();
 export const updateResponsible = createEvent<User | null>();
 
-export const setIsNewReport = createEvent();
-
-export const $isNewReport = createStore(true)
-  .on(setIsNewReport, (_, isNew) => isNew)
-  .reset(clearReport);
-
 export const $reportRequestState = createStore(RequestStates.IDLE);
 $reportRequestState
   .on(fetchReportFx.pending, (_, state) => {
@@ -150,20 +144,6 @@ sample({
   target: $reportForm, // Копируем данные в редактируемый стор
 });
 
-// При загрузке отчёта устанавливаем `isNewReport`
-sample({
-  source: fetchReportFx.doneData,
-  fn: () => false, // Если отчёт загружен, это НЕ новый отчёт
-  target: setIsNewReport,
-});
-
-// При создании отчёта обновляем `isNewReport`
-sample({
-  source: createReportFx.doneData,
-  fn: () => false, // После успешного создания отчёта считаем его существующим
-  target: setIsNewReport,
-});
-
 sample({
   source: $combinedForm, // { reportForm, initialForm }
   clock: updateReportEvent,