refactor: replace MemoSkeleton with a new Skeleton component for improved loading states

Author: johnnyjoygh

web/src/components/MemoEditor/index.tsx

@@ -105,8 +105,6 @@ const MemoEditorImpl: React.FC<MemoEditorProps> = ({
 
       // Notify parent component of successful save
       onConfirm?.(result.memoName);
-
-      toast.success("Saved successfully");
     } catch (error) {
       handleError(error, toast.error, {
         context: "Failed to save memo",

web/src/components/MemoSkeleton.tsx

@@ -15,7 +15,7 @@ import type { MemoRenderContext } from "../MasonryView";
 import MasonryView from "../MasonryView";
 import MemoEditor from "../MemoEditor";
 import MemoFilters from "../MemoFilters";
-import MemoSkeleton from "../MemoSkeleton";
+import Skeleton from "../Skeleton";
 
 interface Props {
   renderer: (memo: Memo, context?: MemoRenderContext) => JSX.Element;
@@ -143,9 +143,7 @@ const PagedMemoList = (props: Props) => {
     <div className="flex flex-col justify-start items-start w-full max-w-full">
       {/* Show skeleton loader during initial load */}
       {isLoading ? (
-        <div className="w-full flex flex-col justify-start items-center">
-          <MemoSkeleton showCreator={props.showCreator} count={4} />
-        </div>
+        <Skeleton type="memo" showCreator={props.showCreator} count={4} />
       ) : (
         <>
           <MasonryView
@@ -162,12 +160,8 @@ const PagedMemoList = (props: Props) => {
             listMode={layout === "LIST"}
           />
 
-          {/* Loading indicator for pagination */}
-          {isFetchingNextPage && (
-            <div className="w-full flex flex-row justify-center items-center my-4">
-              <LoaderIcon className="animate-spin text-muted-foreground" />
-            </div>
-          )}
+          {/* Loading indicator for pagination - use skeleton for content consistency */}
+          {isFetchingNextPage && <Skeleton type="pagination" showCreator={props.showCreator} count={2} />}
 
           {/* Empty state or back-to-top button */}
           {!isFetchingNextPage && (

web/src/components/PagedMemoList/PagedMemoList.tsx

@@ -0,0 +1,80 @@
+import { cn } from "@/lib/utils";
+
+interface Props {
+  type?: "route" | "memo" | "pagination";
+  showCreator?: boolean;
+  count?: number;
+  showEditor?: boolean;
+}
+
+// Memo card skeleton component
+const MemoCardSkeleton = ({ showCreator = false, index = 0 }: { showCreator?: boolean; index?: number }) => (
+  <div className="relative flex flex-col justify-start items-start bg-card w-full px-4 py-3 mb-2 gap-2 rounded-lg border border-border animate-pulse">
+    {/* Header section */}
+    <div className="w-full flex flex-row justify-between items-center gap-2">
+      <div className="w-auto max-w-[calc(100%-8rem)] grow flex flex-row justify-start items-center">
+        {showCreator ? (
+          <div className="w-full flex flex-row justify-start items-center gap-2">
+            <div className="w-8 h-8 rounded-full bg-muted shrink-0" />
+            <div className="w-full flex flex-col justify-center items-start gap-1">
+              <div className="h-4 w-24 bg-muted rounded" />
+              <div className="h-3 w-16 bg-muted rounded" />
+            </div>
+          </div>
+        ) : (
+          <div className="h-4 w-32 bg-muted rounded" />
+        )}
+      </div>
+      {/* Action buttons skeleton */}
+      <div className="flex flex-row gap-2">
+        <div className="w-4 h-4 bg-muted rounded" />
+        <div className="w-4 h-4 bg-muted rounded" />
+      </div>
+    </div>
+
+    {/* Content section */}
+    <div className="w-full flex flex-col gap-2">
+      <div className="space-y-2">
+        <div className={cn("h-4 bg-muted rounded", index % 3 === 0 ? "w-full" : index % 3 === 1 ? "w-4/5" : "w-5/6")} />
+        <div className={cn("h-4 bg-muted rounded", index % 2 === 0 ? "w-3/4" : "w-4/5")} />
+        {index % 2 === 0 && <div className="h-4 w-2/3 bg-muted rounded" />}
+      </div>
+    </div>
+  </div>
+);
+
+const Skeleton = ({ type = "route", showCreator = false, count = 4, showEditor = true }: Props) => {
+  // Pagination type: simpler, just memos
+  if (type === "pagination") {
+    return (
+      <div className="w-full flex flex-col justify-center items-center my-4">
+        <div className="w-full max-w-2xl mx-auto">
+          {Array.from({ length: count }).map((_, index) => (
+            <MemoCardSkeleton key={index} showCreator={showCreator} index={index} />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // Route or memo type: with optional wrapper
+  return (
+    <div className="w-full max-w-full px-4 py-6">
+      <div className="w-full max-w-2xl mx-auto">
+        {/* Editor skeleton - only for route type */}
+        {type === "route" && showEditor && (
+          <div className="relative flex flex-col justify-start items-start bg-card w-full px-4 py-3 mb-4 gap-2 rounded-lg border border-border animate-pulse">
+            <div className="w-full h-12 bg-muted rounded" />
+          </div>
+        )}
+
+        {/* Memo skeletons */}
+        {Array.from({ length: count }).map((_, index) => (
+          <MemoCardSkeleton key={index} showCreator={showCreator} index={index} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Skeleton;

web/src/components/Skeleton.tsx

@@ -0,0 +1,19 @@
+import { LoaderIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface Props {
+  className?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+const Spinner = ({ className, size = "md" }: Props) => {
+  const sizeClasses = {
+    sm: "w-4 h-4",
+    md: "w-6 h-6",
+    lg: "w-8 h-8",
+  };
+
+  return <LoaderIcon className={cn("animate-spin", sizeClasses[size], className)} />;
+};
+
+export default Spinner;

web/src/components/Spinner.tsx

@@ -2,12 +2,12 @@ import { Suspense, useEffect, useMemo } from "react";
 import { Outlet, useLocation, useSearchParams } from "react-router-dom";
 import usePrevious from "react-use/lib/usePrevious";
 import Navigation from "@/components/Navigation";
+import Skeleton from "@/components/Skeleton";
 import { useInstance } from "@/contexts/InstanceContext";
 import { useMemoFilterContext } from "@/contexts/MemoFilterContext";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useMediaQuery from "@/hooks/useMediaQuery";
 import { cn } from "@/lib/utils";
-import Loading from "@/pages/Loading";
 import { redirectOnAuthFailure } from "@/utils/auth-redirect";
 
 const RootLayout = () => {
@@ -47,7 +47,7 @@ const RootLayout = () => {
         </div>
       )}
       <main className="w-full h-auto grow shrink flex flex-col justify-start items-center">
-        <Suspense fallback={<Loading />}>
+        <Suspense fallback={<Skeleton type="route" />}>
           <Outlet />
         </Suspense>
       </main>

web/src/layouts/RootLayout.tsx

@@ -1,7 +1,7 @@
 import "@github/relative-time-element";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef } from "react";
 import { createRoot } from "react-dom/client";
 import { Toaster } from "react-hot-toast";
 import { RouterProvider } from "react-router-dom";
@@ -12,7 +12,6 @@ import { AuthProvider, useAuth } from "@/contexts/AuthContext";
 import { InstanceProvider, useInstance } from "@/contexts/InstanceContext";
 import { ViewProvider } from "@/contexts/ViewContext";
 import { queryClient } from "@/lib/query-client";
-import Loading from "@/pages/Loading";
 import router from "./router";
 import { applyLocaleEarly } from "./utils/i18n";
 import { applyThemeEarly } from "./utils/theme";
@@ -26,22 +25,21 @@ applyLocaleEarly();
 function AppInitializer({ children }: { children: React.ReactNode }) {
   const { isInitialized: authInitialized, initialize: initAuth } = useAuth();
   const { isInitialized: instanceInitialized, initialize: initInstance } = useInstance();
-  const [initStarted, setInitStarted] = useState(false);
+  const initStartedRef = useRef(false);
 
-  // Initialize on mount
+  // Initialize on mount - run in parallel for better performance
   useEffect(() => {
-    if (initStarted) return;
-    setInitStarted(true);
+    if (initStartedRef.current) return;
+    initStartedRef.current = true;
 
     const init = async () => {
-      await initInstance();
-      await initAuth();
+      await Promise.all([initInstance(), initAuth()]);
     };
     init();
-  }, [initAuth, initInstance, initStarted]);
+  }, [initAuth, initInstance]);
 
   if (!authInitialized || !instanceInitialized) {
-    return <Loading />;
+    return undefined;
   }
 
   return <>{children}</>;

web/src/main.tsx

@@ -1,8 +1,8 @@
 import { timestampDate } from "@bufbuild/protobuf/wkt";
-import { LoaderIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import { setAccessToken } from "@/auth-state";
+import Spinner from "@/components/Spinner";
 import { authServiceClient } from "@/connect";
 import { useAuth } from "@/contexts/AuthContext";
 import { absolutifyLink } from "@/helpers/utils";
@@ -113,7 +113,7 @@ const AuthCallback = () => {
   return (
     <div className="p-4 py-24 w-full h-full flex justify-center items-center">
       {state.loading ? (
-        <LoaderIcon className="animate-spin text-foreground" />
+        <Spinner size="lg" />
       ) : (
         <div className="max-w-lg font-mono whitespace-pre-wrap opacity-80">{state.errorMessage}</div>
       )}