fix project issue loader and error handling (#5223)

space/app/issues/[anchor]/layout.tsx

@@ -6,6 +6,7 @@ import useSWR from "swr";
 // components
 import { LogoSpinner } from "@/components/common";
 import { IssuesNavbarRoot } from "@/components/issues";
+import { SomethingWentWrongError } from "@/components/issues/issue-layouts/error";
 // hooks
 import { useIssueFilter, usePublish, usePublishList } from "@/hooks/store";
 // assets
@@ -27,7 +28,7 @@ const IssuesLayout = observer((props: Props) => {
   const publishSettings = usePublish(anchor);
   const { updateLayoutOptions } = useIssueFilter();
   // fetch publish settings
-  useSWR(
+  const { error } = useSWR(
     anchor ? `PUBLISH_SETTINGS_${anchor}` : null,
     anchor
       ? async () => {
@@ -45,7 +46,9 @@ const IssuesLayout = observer((props: Props) => {
       : null
   );
 
-  if (!publishSettings) return <LogoSpinner />;
+  if (!publishSettings && !error) return <LogoSpinner />;
+
+  if (error) return <SomethingWentWrongError />;
 
   return (
     <div className="relative flex h-screen min-h-[500px] w-screen flex-col overflow-hidden">

space/core/components/issues/issue-layouts/error.tsx

@@ -0,0 +1,17 @@
+import Image from "next/image";
+// assets
+import SomethingWentWrongImage from "public/something-went-wrong.svg";
+
+export const SomethingWentWrongError = () => (
+  <div className="grid h-full w-full place-items-center p-6">
+    <div className="text-center">
+      <div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-custom-background-80">
+        <div className="grid h-32 w-32 place-items-center">
+          <Image src={SomethingWentWrongImage} alt="Oops! Something went wrong" />
+        </div>
+      </div>
+      <h1 className="mt-12 text-3xl font-semibold">Oops! Something went wrong.</h1>
+      <p className="mt-4 text-custom-text-300">The public board does not exist. Please check the URL.</p>
+    </div>
+  </div>
+);

space/core/components/issues/issue-layouts/root.tsx

@@ -2,7 +2,6 @@
 
 import { FC, useEffect } from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
 import useSWR from "swr";
 // components
 import { IssueKanbanLayoutRoot, IssuesListLayoutRoot } from "@/components/issues";
@@ -13,7 +12,7 @@ import { useIssue, useIssueDetails, useIssueFilter } from "@/hooks/store";
 // store
 import { PublishStore } from "@/store/publish/publish.store";
 // assets
-import SomethingWentWrongImage from "public/something-went-wrong.svg";
+import { SomethingWentWrongError } from "./error";
 
 type Props = {
   peekId: string | undefined;
@@ -24,7 +23,7 @@ export const IssuesLayoutsRoot: FC<Props> = observer((props) => {
   const { peekId, publishSettings } = props;
   // store hooks
   const { getIssueFilters } = useIssueFilter();
-  const { loader, groupedIssueIds, fetchPublicIssues } = useIssue();
+  const { fetchPublicIssues } = useIssue();
   const issueDetailStore = useIssueDetails();
   // derived values
   const { anchor } = publishSettings;
@@ -48,28 +47,12 @@ export const IssuesLayoutsRoot: FC<Props> = observer((props) => {
 
   if (!anchor) return null;
 
+  if (error) return <SomethingWentWrongError />;
+
   return (
     <div className="relative h-full w-full overflow-hidden">
       {peekId && <IssuePeekOverview anchor={anchor} peekId={peekId} />}
-
+      {activeLayout && (
-      {loader && !groupedIssueIds ? (
-        <div className="py-10 text-center text-sm text-custom-text-100">Loading...</div>
-      ) : (
-        <>
-          {error ? (
-            <div className="grid h-full w-full place-items-center p-6">
-              <div className="text-center">
-                <div className="mx-auto grid h-52 w-52 place-items-center rounded-full bg-custom-background-80">
-                  <div className="grid h-32 w-32 place-items-center">
-                    <Image src={SomethingWentWrongImage} alt="Oops! Something went wrong" />
-                  </div>
-                </div>
-                <h1 className="mt-12 text-3xl font-semibold">Oops! Something went wrong.</h1>
-                <p className="mt-4 text-custom-text-300">The public board does not exist. Please check the URL.</p>
-              </div>
-            </div>
-          ) : (
-            activeLayout && (
         <div className="relative flex h-full w-full flex-col overflow-hidden">
           {/* applied filters */}
           <IssueAppliedFilters anchor={anchor} />
@@ -85,9 +68,6 @@ export const IssuesLayoutsRoot: FC<Props> = observer((props) => {
             </div>
           )}
         </div>
-            )
-          )}
-        </>
       )}
     </div>
   );