Suspense fallback screen, refresh page when org changed

packages/react/src/components/common/Loading.tsx

@@ -0,0 +1,39 @@
+import { cn } from "@/lib/utils";
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+
+interface LoadingProps {
+  size: "sm" | "md" | "lg" | "xl";
+}
+
+export function Loading(
+  props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> &
+    LoadingProps,
+) {
+  const sizeCN = cn({
+    "text-sm": props.size === "sm",
+    "text-lg": props.size === "md",
+    "text-2xl": props.size === "lg",
+    "text-4xl": props.size === "xl",
+  });
+
+  return (
+    <div
+      {...props}
+      className={cn(
+        "flex w-full h-full justify-center items-center",
+        props.className,
+      )}
+    >
+      <div className={cn("i-lucide:loader-2 animate-spin", sizeCN)} />
+    </div>
+  );
+}
+
+export function GlobalLoading () {
+
+	return (
+		<div className="fixed top-0 left-0 w-full h-full">
+			<Loading size='xl' />
+		</div>
+	)
+}

packages/react/src/components/layout/Frame.tsx

@@ -1,6 +1,6 @@
 import "./Frame.scss";
 import { Navigate, Outlet, useLocation } from "react-router-dom";
-import { useEffect } from "react";
+import { Suspense, useEffect } from "react";
 import { Sidebar } from "@/components/sidebar/sidebar";
 import {
   isFloatingAtom,
@@ -18,6 +18,7 @@ import clsx from "clsx";
 import { orgAtom } from "@/store/org";
 import { ErrorFallback } from "../common/ErrorFallback";
 import { ErrorBoundary } from "react-error-boundary";
+import { Loading } from "../common/Loading";
 
 export function Frame() {
   const location = useLocation();
@@ -57,7 +58,9 @@ export function Frame() {
       <Header onClick={toggle} id="header" />
       <main className="">
         <ErrorBoundary FallbackComponent={ErrorFallback}>
-          <Outlet />
+          <Suspense fallback={<Loading size="xl" />}>
+            <Outlet />
+          </Suspense>
         </ErrorBoundary>
       </main>
       {isMobile && <footer className="">Footer</footer>}

packages/react/src/routes/channelsOrg.tsx

@@ -1,13 +1,24 @@
 import { ChannelCard } from "@/components/channel/ChannelCard";
 import { useChannels } from "@/services/channel.service";
-import { useParams, useSearchParams } from "react-router-dom";
+import { orgAtom } from "@/store/org";
+import { useAtomValue } from "jotai";
+import { useEffect } from "react";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { VirtuosoGrid } from "react-virtuoso";
 
-export function ChannelsOrg() {
+export default function ChannelsOrg() {
+  const navigate = useNavigate();
   const { org } = useParams();
-  // const [org, setOrg] = useAtom(orgAtom);
+  const currentOrg = useAtomValue(orgAtom);
 
-  const { data: channels, fetchNextPage: fetchChannels } = useChannels({ org, sort: 'suborg' });
+  const { data: channels, fetchNextPage: fetchChannels } = useChannels({
+    org,
+    sort: "suborg",
+  });
+
+  useEffect(() => {
+    navigate(`/org/${currentOrg}/channels`);
+  }, [currentOrg]);
 
   return (
     <div className="h-full w-full p-4 md:p-8">

packages/react/src/routes/home.tsx

@@ -5,17 +5,27 @@ import { useLive } from "@/services/live.service";
 import { useVideos } from "@/services/video.service";
 import { Button } from "@/shadcn/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shadcn/ui/tabs";
+import { orgAtom } from "@/store/org";
 import { videoCardSizeAtom } from "@/store/video";
-import { useAtom } from "jotai";
-import { useMemo, useState } from "react";
+import { useAtom, useAtomValue } from "jotai";
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Navigate, useParams } from "react-router-dom";
+import {
+  Navigate,
+  useNavigate,
+  useParams,
+  useSearchParams,
+} from "react-router-dom";
 import { VirtuosoGrid } from "react-virtuoso";
 
 export function Home() {
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
   const { t } = useTranslation();
   const { org } = useParams();
-  const [tab, setTab] = useState("live");
+  const [cardSize, setCardSize] = useAtom(videoCardSizeAtom);
+  const currentOrg = useAtomValue(orgAtom);
+  const [tab, setTab] = useState(searchParams.get("tab") ?? "live");
   const { data: live, isLoading: liveLoading } = useLive(
     { org, type: ["placeholder", "stream"], include: ["mentions"] },
     { refetchInterval: 1000 * 60 * 5, enabled: tab === "live" },
@@ -58,7 +68,6 @@ export function Home() {
       enabled: tab === "clips",
     },
   );
-  const [cardSize, setCardSize] = useAtom(videoCardSizeAtom);
 
   const listCN = useMemo(
     () =>
@@ -72,6 +81,16 @@ export function Home() {
     [cardSize],
   );
 
+  useEffect(() => {
+    navigate(`/org/${currentOrg}`);
+  }, [currentOrg]);
+
+  useEffect(() => {
+    console.log(`tab changed ${tab}`);
+    searchParams.set("tab", tab);
+    setSearchParams(searchParams);
+  }, [searchParams, tab]);
+
   if (!org) return <Navigate to="/org404" />;
 
   return (