From fbbf4e4f3dd2d19d0b1aa23701b5b7982badfe23 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Sun, 28 Jul 2024 16:40:34 +0800
Subject: [PATCH] fix: user profile modal data loading indicator

Signed-off-by: Innei <i@innei.in>
---
 .../modules/profile/user-profile-modal.tsx    | 43 +++++++++++--------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/renderer/src/modules/profile/user-profile-modal.tsx b/src/renderer/src/modules/profile/user-profile-modal.tsx
index fa2044c34..8a4e2c912 100644
--- a/src/renderer/src/modules/profile/user-profile-modal.tsx
+++ b/src/renderer/src/modules/profile/user-profile-modal.tsx
@@ -18,9 +18,7 @@ import type { FeedViewType } from "@renderer/lib/enum"
 import { cn } from "@renderer/lib/utils"
 import type { SubscriptionModel } from "@renderer/models"
 import { useUserSubscriptionsQuery } from "@renderer/modules/profile/hooks"
-import {
-  useSubscriptionStore,
-} from "@renderer/store/subscription"
+import { useSubscriptionStore } from "@renderer/store/subscription"
 import { useAnimationControls } from "framer-motion"
 import type { FC } from "react"
 import { Fragment, useEffect, useState } from "react"
@@ -103,21 +101,28 @@ export const UserProfileModalContent: FC<{
               </div>
             </div>
             <div className="mb-4 h-full w-[70ch] max-w-full space-y-10 overflow-auto px-5">
-              {Object.keys(subscriptions.data || {}).map((category) => (
-                <div key={category}>
-                  <div className="mb-4 flex items-center text-2xl font-bold">
-                    <h3>{category}</h3>
+              {subscriptions.isLoading ? (
+                <LoadingCircle
+                  size="large"
+                  className="center h-48 w-[46.125rem] max-w-full"
+                />
+              ) : (
+                subscriptions.data && Object.keys(subscriptions.data).map((category) => (
+                  <div key={category}>
+                    <div className="mb-4 flex items-center text-2xl font-bold">
+                      <h3>{category}</h3>
+                    </div>
+                    <div>
+                      {subscriptions.data?.[category].map((subscription) => (
+                        <SubscriptionItem
+                          key={subscription.feedId}
+                          subscription={subscription}
+                        />
+                      ))}
+                    </div>
                   </div>
-                  <div>
-                    {subscriptions.data?.[category].map((subscription) => (
-                      <SubscriptionItem
-                        key={subscription.feedId}
-                        subscription={subscription}
-                      />
-                    ))}
-                  </div>
-                </div>
-              ))}
+                ))
+              )}
             </div>
           </Fragment>
         )}
@@ -164,7 +169,9 @@ const SubscriptionItem: FC<{
               const defaultView = getSidebarActiveView() as FeedViewType
 
               present({
-                title: `${isFollowed ? "Edit " : ""}${APP_NAME} - ${subscription.feeds.title}`,
+                title: `${isFollowed ? "Edit " : ""}${APP_NAME} - ${
+                  subscription.feeds.title
+                }`,
                 content: ({ dismiss }) => (
                   <FeedForm
                     asWidget