Added Loading UI when switching page (#1400)

Author: lpeyr

app/[lng]/chat/chat.tsx

@@ -341,14 +341,16 @@ export default function Chat(props: Props) {
           }
         >
           <div className="flex items-center space-x-2">
-            <ModelSelector
-              placeholder={t("model")}
-              lng={lng}
-              premium={hasGpt4Access()}
-              avModels={avModels}
-              model={model}
-              setModel={setModel}
-            />
+            <span>
+              <ModelSelector
+                placeholder={t("model")}
+                lng={lng}
+                premium={hasGpt4Access()}
+                avModels={avModels}
+                model={model}
+                setModel={setModel}
+              />
+            </span>
             {messages.length === 1 && (
               <Dialog>
                 <DialogTrigger>

app/[lng]/chat/page.tsx

@@ -1,5 +1,5 @@
 import Chat from "./chat";
-import React from "react";
+import React, { Suspense } from "react";
 import type { Metadata } from "next";
 import {
   getUser,
@@ -9,6 +9,7 @@ import {
 } from "@/utils/supabase/queries";
 import { createClient } from "@/utils/supabase/server";
 import { DefaultLanguageParams } from "@/lib/languages";
+import LoadingUI from "@/components/loading";
 
 export const metadata: Metadata = {
   title: "Chat",
@@ -63,6 +64,8 @@ export default async function ChatPage({
   }
   const q = await getQuotas();
   return (
-    <Chat subscriptions={subscriptions} user={user} lng={lng} quotas={q} />
+    <Suspense fallback={<LoadingUI />}>
+      <Chat subscriptions={subscriptions} user={user} lng={lng} quotas={q} />
+    </Suspense>
   );
 }

app/[lng]/create/page.tsx

@@ -8,6 +8,8 @@ import {
 import Create from "./create";
 import { createClient } from "@/utils/supabase/server";
 import { DefaultLanguageParams } from "@/lib/languages";
+import { Suspense } from "react";
+import LoadingUI from "@/components/loading";
 
 export default async function CreatePage({
   params,
@@ -58,12 +60,14 @@ export default async function CreatePage({
   }
   const q = await getQuotas();
   return (
-    <Create
-      products={products}
-      subscriptions={subscriptions}
-      user={user}
-      lng={lng}
-      quotas={q}
-    />
+    <Suspense fallback={<LoadingUI />}>
+      <Create
+        products={products}
+        subscriptions={subscriptions}
+        user={user}
+        lng={lng}
+        quotas={q}
+      />
+    </Suspense>
   );
 }

app/[lng]/generations/edit/page.tsx

@@ -1,29 +1,17 @@
 "use client";
 import { Suspense } from "react";
-import { Skeleton } from "@/components/ui/skeleton";
 import GenerationEditPage from "./editpage";
 import { DefaultLanguageParams } from "@/lib/languages";
+import LoadingUI from "@/components/loading";
 
 export default function ViewPage({
   params,
 }: {
   params: DefaultLanguageParams;
 }) {
   return (
-    <Suspense fallback={LoadingUI()}>
+    <Suspense fallback={<LoadingUI />}>
       <GenerationEditPage params={params} />
     </Suspense>
   );
 }
-function LoadingUI() {
-  return (
-    <div className="flex h-screen w-screen flex-col items-center justify-center">
-      <p>Loading...</p>
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
-        <Skeleton className="h-16 w-[240px]" />
-      </div>
-    </div>
-  );
-}

app/[lng]/generations/page.tsx

@@ -1,29 +1,17 @@
 "use client";
 import { Suspense } from "react";
-import { Skeleton } from "@/components/ui/skeleton";
 import GenerationsPage from "./genpage";
 import { DefaultLanguageParams } from "@/lib/languages";
+import LoadingUI from "@/components/loading";
 
 export default function ViewPage({
   params,
 }: {
   params: DefaultLanguageParams;
 }) {
   return (
-    <Suspense fallback={LoadingUI()}>
+    <Suspense fallback={<LoadingUI />}>
       <GenerationsPage params={params} />
     </Suspense>
   );
 }
-function LoadingUI() {
-  return (
-    <div className="flex h-screen w-screen flex-col items-center justify-center">
-      <p>Loading...</p>
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
-        <Skeleton className="h-16 w-[240px]" />
-      </div>
-    </div>
-  );
-}

app/[lng]/generations/view/page.tsx

@@ -1,29 +1,17 @@
 "use client";
 import { Suspense } from "react";
 import GenerationViewPage from "./viewpage";
-import { Skeleton } from "@/components/ui/skeleton";
 import { DefaultLanguageParams } from "@/lib/languages";
+import LoadingUI from "@/components/loading";
 
 export default function ViewPage({
   params,
 }: {
   params: DefaultLanguageParams;
 }) {
   return (
-    <Suspense fallback={LoadingUI()}>
+    <Suspense fallback={<LoadingUI />}>
       <GenerationViewPage params={params} />
     </Suspense>
   );
 }
-function LoadingUI() {
-  return (
-    <div className="flex h-screen w-screen flex-col items-center justify-center">
-      <p>Loading...</p>
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
-        <Skeleton className="h-16 w-[240px]" />
-      </div>
-    </div>
-  );
-}

app/[lng]/layout.tsx

@@ -10,6 +10,7 @@ import MobileNavBar from "@/components/mobile-nav";
 import { Toaster } from "@/components/ui/toaster";
 import { Suspense, use } from "react";
 import { DefaultLanguageParams } from "@/lib/languages";
+import LoadingUI from "@/components/loading";
 
 const manrope = Manrope({ subsets: ["latin"] });
 export async function generateStaticParams() {
@@ -93,7 +94,7 @@ export default function RootLayout({
       >
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           <NavBar lng={lng} />
-          {children}
+          <Suspense fallback={<LoadingUI />}>{children}</Suspense>
           <MobileNavBar lng={lng} />
         </ThemeProvider>
         <Suspense>