Enhance layout and standard section components for improved user redirection and loading state management

- Added a redirect for authenticated users accessing public routes in the `RootLayout` component.
- Integrated `NumberFlow` for better number formatting in the `BaseStandardSection` component.
- Refactored loading state handling by renaming `isFetching` to `isLoading` for clarity and consistency across components.

client/src/app/[site]/components/shared/StandardSection/BaseStandardSection.tsx

@@ -7,6 +7,7 @@ import { addFilter, FilterParameter } from "../../../../../lib/store";
 import { formatter } from "../../../../../lib/utils";
 import { Skeleton } from "./Skeleton";
 import { BaseStandardSectionDialog } from "./BaseStandardSectionDialog";
+import NumberFlow from "@number-flow/react";
 
 export const Row = ({
   e,
@@ -61,7 +62,11 @@ export const Row = ({
           <div className="hidden group-hover:block text-neutral-400">
             {round(e.percentage, 1)}%
           </div>
-          <div>{formatter(e.count)}</div>
+          <NumberFlow
+            respectMotionPreference={false}
+            value={e.count}
+            format={{ notation: "compact" }}
+          />
         </div>
       </div>
     </div>
@@ -71,7 +76,7 @@ export const Row = ({
 interface BaseStandardSectionProps {
   title: string;
   data: { data?: SingleColResponse[] } | undefined;
-  isFetching: boolean;
+  isLoading: boolean;
   error: Error | null;
   refetch: () => void;
   getKey: (item: SingleColResponse) => string;
@@ -86,7 +91,7 @@ interface BaseStandardSectionProps {
 export function BaseStandardSection({
   title,
   data,
-  isFetching,
+  isLoading,
   error,
   refetch,
   getKey,
@@ -98,7 +103,6 @@ export function BaseStandardSection({
   filterParameter,
 }: BaseStandardSectionProps) {
   // Determine if we're in a loading state
-  const isLoading = isFetching;
 
   const ratio = data?.data?.[0]?.percentage
     ? 100 / data?.data?.[0]?.percentage

client/src/app/[site]/components/shared/StandardSection/StandardSection.tsx

@@ -20,7 +20,6 @@ export function StandardSection({
   filterParameter,
 }: {
   title: string;
-  isFetching?: boolean;
   getKey: (item: SingleColResponse) => string;
   getLabel: (item: SingleColResponse) => ReactNode;
   getValue: (item: SingleColResponse) => string;
@@ -29,17 +28,21 @@ export function StandardSection({
   countLabel?: string;
   filterParameter: FilterParameter;
 }) {
-  const { data, isFetching, error, refetch } = useSingleCol({
+  const { data, isLoading, isFetching, error, refetch } = useSingleCol({
     parameter: filterParameter,
   });
 
-  const { data: previousData, isFetching: previousIsFetching } = useSingleCol({
+  const {
+    data: previousData,
+    isLoading: previousIsLoading,
+    isFetching: previousIsFetching,
+  } = useSingleCol({
     parameter: filterParameter,
     periodTime: "previous",
   });
 
   // Create combined loading state
-  const isLoading = isFetching || previousIsFetching;
+  const loading = isLoading || previousIsLoading;
 
   // For potential additional features that use previous data
   const previousDataMap = useMemo(() => {
@@ -51,7 +54,7 @@ export function StandardSection({
 
   return (
     <>
-      {isLoading && (
+      {(isFetching || previousIsFetching) && (
         <div className="absolute top-[-8px] left-0 w-full h-full">
           <CardLoader />
         </div>
@@ -59,7 +62,7 @@ export function StandardSection({
       <BaseStandardSection
         title={title}
         data={data}
-        isFetching={isLoading}
+        isLoading={loading}
         error={error}
         refetch={refetch}
         getKey={getKey}

client/src/app/layout.tsx

@@ -80,6 +80,10 @@ export default function RootLayout({
     ) {
       redirect("/login");
     }
+
+    if (user && publicRoutes.includes(pathname)) {
+      redirect("/");
+    }
   }, [isPending, user, pathname, isCheckingPublic, isPublicSite]);
 
   return (