feat: properly handle data fetching state on view bucket page

src/lib/api.ts

@@ -30,23 +30,21 @@ const api = {
       headers: { ...headers, ...(options?.headers || {}) },
     });
 
-    if (!res.ok) {
-      const json = await res.json().catch(() => {});
-      const message = json?.message || res.statusText;
-      throw new Error(message);
-    }
-
     const isJson = res.headers
       .get("Content-Type")
       ?.includes("application/json");
+    const data = isJson ? await res.json() : await res.text();
 
-    if (isJson) {
+    if (!res.ok) {
-      const json = (await res.json()) as T;
+      const message = isJson
-      return json;
+        ? data?.message
+        : typeof data === "string"
+        ? data
+        : res.statusText;
+      throw new Error(message);
     }
 
-    const text = await res.text();
+    return data as unknown as T;
-    return text as unknown as T;
   },
 
   async get<T = any>(url: string, options?: Partial<FetchOptions>) {

src/pages/buckets/manage/browse/object-list.tsx

@@ -1,10 +1,16 @@
-import { Table } from "react-daisyui";
+import { Alert, Loading, Table } from "react-daisyui";
 import { useBrowseObjects } from "./hooks";
 import { dayjs, readableBytes } from "@/lib/utils";
 import mime from "mime/lite";
 import { Object } from "./types";
 import { API_URL } from "@/lib/api";
-import { FileArchive, FileIcon, FileType, Folder } from "lucide-react";
+import {
+  CircleXIcon,
+  FileArchive,
+  FileIcon,
+  FileType,
+  Folder,
+} from "lucide-react";
 import { useBucketContext } from "../context";
 import ObjectActions from "./object-actions";
 import GotoTopButton from "@/components/ui/goto-top-btn";
@@ -16,7 +22,10 @@ type Props = {
 
 const ObjectList = ({ prefix, onPrefixChange }: Props) => {
   const { bucketName } = useBucketContext();
-  const { data } = useBrowseObjects(bucketName, { prefix, limit: 1000 });
+  const { data, error, isLoading } = useBrowseObjects(bucketName, {
+    prefix,
+    limit: 1000,
+  });
 
   const onObjectClick = (object: Object) => {
     window.open(API_URL + object.viewUrl, "_blank");
@@ -32,13 +41,29 @@ const ObjectList = ({ prefix, onPrefixChange }: Props) => {
         </Table.Head>
 
         <Table.Body>
-          {!data?.prefixes?.length && !data?.objects?.length && (
+          {isLoading ? (
             <tr>
-              <td className="text-center py-8" colSpan={3}>
+              <td colSpan={3}>
+                <div className="h-[250px] flex items-center justify-center">
+                  <Loading />
+                </div>
+              </td>
+            </tr>
+          ) : error ? (
+            <tr>
+              <td colSpan={3}>
+                <Alert status="error" icon={<CircleXIcon />}>
+                  <span>{error.message}</span>
+                </Alert>
+              </td>
+            </tr>
+          ) : !data?.prefixes?.length && !data?.objects?.length ? (
+            <tr>
+              <td className="text-center py-16" colSpan={3}>
                 No objects
               </td>
             </tr>
-          )}
+          ) : null}
 
           {data?.prefixes.map((prefix) => (
             <tr

src/pages/buckets/manage/page.tsx

@@ -2,12 +2,18 @@ import { useParams } from "react-router-dom";
 import { useBucket } from "./hooks";
 import Page from "@/context/page-context";
 import TabView, { Tab } from "@/components/containers/tab-view";
-import { ChartLine, FolderSearch, LockKeyhole } from "lucide-react";
+import {
+  ChartLine,
+  CircleXIcon,
+  FolderSearch,
+  LockKeyhole,
+} from "lucide-react";
 import OverviewTab from "./overview/overview-tab";
 import PermissionsTab from "./permissions/permissions-tab";
 import MenuButton from "./components/menu-button";
 import BrowseTab from "./browse/browse-tab";
 import { BucketContext } from "./context";
+import { Alert, Loading } from "react-daisyui";
 
 const tabs: Tab[] = [
   {
@@ -32,26 +38,40 @@ const tabs: Tab[] = [
 
 const ManageBucketPage = () => {
   const { id } = useParams();
-  const { data, refetch } = useBucket(id);
+  const { data, error, isLoading, refetch } = useBucket(id);
 
   const name = data?.globalAliases[0];
 
   return (
-    <div className="container">
+    <>
       <Page
         title={name || "Manage Bucket"}
         prev="/buckets"
         actions={data ? <MenuButton /> : undefined}
       />
 
-      {data && (
+      {isLoading && (
-        <BucketContext.Provider
+        <div className="h-full flex items-center justify-center">
-          value={{ bucket: data, refetch, bucketName: name || "" }}
+          <Loading size="lg" />
-        >
+        </div>
-          <TabView tabs={tabs} className="bg-base-100 h-14 px-1.5" />
-        </BucketContext.Provider>
       )}
-    </div>
+
+      {error != null && (
+        <Alert status="error" icon={<CircleXIcon />}>
+          <span>{error.message}</span>
+        </Alert>
+      )}
+
+      {data && (
+        <div className="container">
+          <BucketContext.Provider
+            value={{ bucket: data, refetch, bucketName: name || "" }}
+          >
+            <TabView tabs={tabs} className="bg-base-100 h-14 px-1.5" />
+          </BucketContext.Provider>
+        </div>
+      )}
+    </>
   );
 };