feat: nice isLoading view

src/components/menu.tsx

@@ -1,12 +1,12 @@
+import { useAppContext } from "@/providers/AuthProvider";
+import apiClient from "@/services/api";
 import { cn } from "@/utils/class-merge";
 import { CalendarDaysIcon, ListBulletIcon, UserIcon } from "@heroicons/react/24/solid";
 import { FunctionComponent, h } from "preact";
 import { useLocation } from "preact-iso";
+import { useEffect, useState } from "preact/hooks";
 import { tv } from "tailwind-variants";
 import classes from "./menu.module.scss";
-import { useEffect, useState } from "preact/hooks";
-import apiClient from "@/services/api";
-import { useAppContext } from "@/providers/AuthProvider";
 
 interface UserProfile {
   username: string;
@@ -72,7 +72,7 @@ const Avatar: FunctionComponent = () => {
     }
   }, [isLoggedIn.value]);
 
-  return (
+  return username ? (
     <button
       onClick={() => route("/profile/settings")}
       class={cn("hidden h-32 w-full cursor-pointer overflow-hidden opacity-100 transition-[height,opacity] md:block", {
@@ -91,7 +91,7 @@ const Avatar: FunctionComponent = () => {
         </div>
       </div>
     </button>
-  );
+  ) : null;
 };
 
 interface MenuItems {

src/pages/profile_calendar.tsx

@@ -374,15 +374,15 @@ const ProfileCalendar: FunctionComponent = () => {
     month: { className: calendarStyles.month },
     year: { className: calendarStyles.year },
   };
+  if (isLoading)
+    return (
+      <div class="flex h-full w-full flex-1 flex-col items-center justify-center">
+        <div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>;
+      </div>
+    );
 
   return (
     <div class="flex w-full flex-col items-center">
-      {isLoading ? (
-        <div class="flex w-full flex-1 items-center justify-center">
-          <div class="text-2xl">Загрузка...</div>
-        </div>
-      ) : (
-        <>
       <ModalTags
         refreshTags={fetchTags}
         isOpen={openModalTags}
@@ -492,12 +492,9 @@ const ProfileCalendar: FunctionComponent = () => {
             {errors.subject && <p class="text-red-500">{errors.subject.message}</p>}
             <div class="flex flex-col items-center gap-6 self-center md:flex-row md:justify-start md:self-start">
               <div
-                    class={cn(
-                      "flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1",
-                      {
+                class={cn("flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1", {
                   "cursor-pointer": isEditModal,
-                      }
-                    )}
+                })}
                 onClick={() => {
                   if (!isEditModal) return;
                   setOpenModalCalendar(true);
@@ -516,12 +513,9 @@ const ProfileCalendar: FunctionComponent = () => {
                 </p>
               </div>
               <div
-                    class={cn(
-                      "flex h-full flex-col items-start gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-4 py-2",
-                      {
+                class={cn("flex h-full flex-col items-start gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-4 py-2", {
                   "cursor-pointer": isEditModal,
-                      }
-                    )}
+                })}
                 onClick={() => {
                   if (!isEditModal) return;
                   setTags({ first: editContent.subject.id, second: editContent.taskType.id, overdue: false });
@@ -589,8 +583,6 @@ const ProfileCalendar: FunctionComponent = () => {
           <div class="rounded-lg bg-[rgba(251,194,199,0.2)] p-4 text-center">На этот день задач нет</div>
         )}
       </div>
-        </>
-      )}
     </div>
   );
 };

src/pages/profile_settings.tsx

@@ -62,6 +62,12 @@ const ProfileSettings: FunctionComponent = () => {
       console.error("Logout failed:", error);
     }
   };
+  if (!userData.username)
+    return (
+      <div class="flex h-full w-full flex-1 flex-col items-center justify-center">
+        <div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>;
+      </div>
+    );
   return (
     <div class={classes.container}>
       <ModalSettings isOpen={isSettingsOpen} setIsOpen={setIsSettingsOpen} onClose={fetchUserData} />
@@ -100,4 +106,6 @@ const ProfileSettings: FunctionComponent = () => {
   );
 };
 
+ProfileSettings.displayName = "ProfileSettings";
+
 export default withTitle(UrlsTitle.PROFILE, ProfileSettings);

src/pages/profile_tasks.tsx

@@ -385,13 +385,15 @@ const ProfileTasks: FunctionComponent = () => {
     }
   };
 
+  if (isLoading)
+    return (
+      <div class="flex h-full w-full flex-1 flex-col items-center justify-center">
+        <div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>;
+      </div>
+    );
+
   return (
     <div class={classes.container}>
-      {isLoading ? (
-        <div class="flex w-full flex-1 items-center justify-center">
-          <div class="text-2xl">Загрузка...</div>
-        </div>
-      ) : (
       <ModalTags
         refreshTags={fetchTags}
         zIndex={70}
@@ -404,7 +406,6 @@ const ProfileTasks: FunctionComponent = () => {
         }}
         onChange={setTags}
       />
-      )}
       <ModalCalendar
         zIndex={80}
         isOpen={openModalCalendar}