refactor(HomePage, SkeletonLoader, ToolPanelSkeleton): improve loading states and adjust layout for better responsiveness

Author: balazs-szucs

frontend/src/core/components/layout/Workbench.tsx

@@ -1,5 +1,5 @@
 import { Suspense, lazy, useCallback } from "react";
-import { Box, Loader, Center } from "@mantine/core";
+import { Box } from "@mantine/core";
 import { useRainbowThemeContext } from "@app/components/shared/RainbowThemeProvider";
 import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
 import { useFileHandler } from "@app/hooks/useFileHandler";
@@ -20,6 +20,8 @@ import LandingPage from "@app/components/shared/LandingPage";
 import Footer from "@app/components/shared/Footer";
 import DismissAllErrorsButton from "@app/components/shared/DismissAllErrorsButton";
 
+import SkeletonLoader from "@app/components/shared/SkeletonLoader";
+
 // Workbench panels are loaded on demand. Viewer pulls in pdfjs-dist and the
 // full @embedpdf plugin set; FileEditor/PageEditor are only needed once a file
 // is open. Lazy-loading keeps all of that out of the initial bundle.
@@ -244,9 +246,19 @@ export default function Workbench() {
       >
         <Suspense
           fallback={
-            <Center style={{ height: "100%" }}>
-              <Loader />
-            </Center>
+            <Box p="md" h="100%">
+              <SkeletonLoader
+                type={
+                  currentView === "viewer"
+                    ? "viewer"
+                    : currentView === "fileEditor"
+                      ? "fileGrid"
+                      : currentView === "pageEditor"
+                        ? "pageGrid"
+                        : "block"
+                }
+              />
+            </Box>
           }
         >
           {renderMainContent()}

frontend/src/core/components/shared/SkeletonLoader.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Box, Group, Stack } from "@mantine/core";
 
 interface SkeletonLoaderProps {
-  type: "pageGrid" | "fileGrid" | "controls" | "viewer" | "block";
+  type: "pageGrid" | "fileGrid" | "controls" | "viewer" | "block" | "toolList";
   count?: number;
   animated?: boolean;
   width?: number | string;
@@ -35,6 +35,36 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
     />
   );
 
+  const renderToolListSkeleton = () => (
+    <Stack gap="xs" p="sm" h="100%" w="100%">
+      {/* Search bar placeholder */}
+      <Box
+        h={40}
+        bg="gray.1"
+        style={{ borderRadius: 8, ...animationStyle }}
+        mb="xs"
+      />
+
+      {/* List items */}
+      {Array.from({ length: count }).map((_, i) => (
+        <Group key={i} wrap="nowrap" gap="sm" py={4}>
+          <Box
+            w={32}
+            h={32}
+            bg="gray.1"
+            style={{ borderRadius: 6, ...animationStyle }}
+          />
+          <Box
+            flex={1}
+            h={20}
+            bg="gray.1"
+            style={{ borderRadius: 4, ...animationStyle }}
+          />
+        </Group>
+      ))}
+    </Stack>
+  );
+
   const renderPageGridSkeleton = () => (
     <div
       style={{
@@ -150,6 +180,8 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
   switch (type) {
     case "block":
       return renderBlock();
+    case "toolList":
+      return renderToolListSkeleton();
     case "pageGrid":
       return renderPageGridSkeleton();
     case "fileGrid":

frontend/src/core/components/tools/SearchResults.tsx

@@ -78,7 +78,7 @@ const SearchResults: React.FC<SearchResultsProps> = ({
         </Box>
       ))}
       {/* Global spacer to allow scrolling past last row in search mode */}
-      <div aria-hidden style={{ height: 200 }} />
+      <div aria-hidden style={{ height: 64 }} />
     </Stack>
   );
 };

frontend/src/core/components/tools/ToolPanelSkeleton.tsx

@@ -0,0 +1,27 @@
+import SkeletonLoader from "@app/components/shared/SkeletonLoader";
+import { useIsMobile } from "@app/hooks/useIsMobile";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+
+export default function ToolPanelSkeleton() {
+  const isMobile = useIsMobile();
+  const { isPanelVisible } = useToolWorkflow();
+
+  const width = isMobile ? "100%" : isPanelVisible ? "18.5rem" : "0";
+
+  return (
+    <div
+      className="tool-panel-skeleton"
+      style={{
+        width,
+        height: isMobile ? "100%" : "100vh",
+        backgroundColor: "var(--bg-toolbar)",
+        borderRight: isMobile ? "none" : "1px solid var(--border-subtle)",
+        overflow: "hidden",
+        transition: "width 0.3s ease",
+        flexShrink: 0,
+      }}
+    >
+      <SkeletonLoader type="toolList" count={12} />
+    </div>
+  );
+}

frontend/src/core/components/tools/ToolPicker.tsx

@@ -183,7 +183,7 @@ const ToolPicker = ({
             {!quickSection && !allSection && <NoToolsFound />}
 
             {/* bottom spacer to allow scrolling past the last row */}
-            <div aria-hidden style={{ height: 200 }} />
+            <div aria-hidden style={{ height: 64 }} />
           </>
         )}
       </Box>

frontend/src/core/pages/HomePage.css

@@ -33,12 +33,14 @@
   height: 1.5rem;
   width: auto;
   flex-shrink: 0;
+  aspect-ratio: 1 / 1;
 }
 
 .mobile-brand-text {
   height: 1.5rem;
   width: auto;
   max-width: 100%;
+  aspect-ratio: 4 / 1; /* Wordmark usually has around 4:1 ratio */
 }
 
 .mobile-toggle-buttons {
@@ -54,14 +56,18 @@
 .mobile-toggle-button {
   border: none;
   border-radius: 9999px;
-  padding: 0.4rem 0.9rem;
-  font-size: 0.8125rem;
+  padding: 0.6rem 1.25rem;
+  font-size: 0.875rem;
   font-weight: 600;
   color: var(--text-muted);
   background: transparent;
   transition:
     background 0.2s ease,
     color 0.2s ease;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .mobile-toggle-button:focus-visible {

frontend/src/core/pages/HomePage.tsx

@@ -24,22 +24,14 @@ import {
 import { useViewer } from "@app/contexts/ViewerContext";
 import AppsIcon from "@mui/icons-material/AppsRounded";
 
-import ToolPanel from "@app/components/tools/ToolPanel";
-import Workbench from "@app/components/layout/Workbench";
 import QuickAccessBar from "@app/components/shared/QuickAccessBar";
 import RightRail from "@app/components/shared/RightRail";
-import FileManager from "@app/components/FileManager";
 import LocalIcon from "@app/components/shared/LocalIcon";
 import { useFilesModalContext } from "@app/contexts/FilesModalContext";
-import AppConfigModal from "@app/components/shared/AppConfigModalLazy";
 import { getStartupNavigationAction } from "@app/utils/homePageNavigation";
 import { HomePageExtensions } from "@app/components/home/HomePageExtensions";
-import LocalIcon from "@app/components/shared/LocalIcon";
-import { useFilesModalContext } from "@app/contexts/FilesModalContext";
-
-import QuickAccessBar from "@app/components/shared/QuickAccessBar";
-import RightRail from "@app/components/shared/RightRail";
 import { LoadingFallback } from "@app/components/shared/LoadingFallback";
+import ToolPanelSkeleton from "@app/components/tools/ToolPanelSkeleton";
 
 import "@app/pages/HomePage.css";
 
@@ -150,8 +142,14 @@ export default function HomePage() {
     if (isMobile) {
       const container = sliderRef.current;
       if (container) {
-        isProgrammaticScroll.current = true;
         const offset = activeMobileView === "tools" ? 0 : container.offsetWidth;
+
+        // Skip if already at the target position to avoid fighting with user swipes
+        if (Math.abs(container.scrollLeft - offset) < 10) {
+          return;
+        }
+
+        isProgrammaticScroll.current = true;
         container.scrollTo({ left: offset, behavior: "smooth" });
 
         // Re-enable scroll listener after animation completes
@@ -165,7 +163,9 @@ export default function HomePage() {
     setActiveMobileView("tools");
     const container = sliderRef.current;
     if (container) {
-      container.scrollTo({ left: 0, behavior: "auto" });
+      if (container.scrollLeft !== 0) {
+        container.scrollTo({ left: 0, behavior: "auto" });
+      }
     }
   }, [activeMobileView, isMobile]);
 
@@ -311,7 +311,7 @@ export default function HomePage() {
               aria-label={t("home.mobile.toolsSlide", "Tool selection panel")}
             >
               <div className="mobile-slide-content">
-                <Suspense fallback={<LoadingFallback />}>
+                <Suspense fallback={<ToolPanelSkeleton />}>
                   <ToolPanel />
                 </Suspense>
               </div>
@@ -406,7 +406,7 @@ export default function HomePage() {
         <Group align="flex-start" gap={0} h="100%" className="flex-nowrap flex">
           <QuickAccessBar ref={quickAccessRef} />
           {!hideToolPanel && (
-            <Suspense fallback={<LoadingFallback />}>
+            <Suspense fallback={<ToolPanelSkeleton />}>
               <ToolPanel />
             </Suspense>
           )}