From c980ee10c0c8bebc77d6dc4a1432ffde09bfe488 Mon Sep 17 00:00:00 2001
From: James Brunton <jbrunton96@gmail.com>
Date: Tue, 9 Dec 2025 11:45:01 +0000
Subject: [PATCH] Backport fixes from SaaS (#5187)

# Description of Changes
- Add new skeleton loader style type (block - nothing's currently using
it but it might as well be available)
- Make Dev API overridable (and set to the new docs that actually work
while Swagger docs don't work properly)
---
 .../core/components/shared/SkeletonLoader.tsx | 67 +++++++++++++------
 frontend/src/core/constants/links.ts          |  1 +
 .../core/data/useTranslatedToolRegistry.tsx   |  3 +-
 3 files changed, 48 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/core/constants/links.ts

diff --git a/frontend/src/core/components/shared/SkeletonLoader.tsx b/frontend/src/core/components/shared/SkeletonLoader.tsx
index 63c4bd22a..a95949e8f 100644
--- a/frontend/src/core/components/shared/SkeletonLoader.tsx
+++ b/frontend/src/core/components/shared/SkeletonLoader.tsx
@@ -2,23 +2,44 @@ import React from 'react';
 import { Box, Group, Stack } from '@mantine/core';
 
 interface SkeletonLoaderProps {
-  type: 'pageGrid' | 'fileGrid' | 'controls' | 'viewer';
+  type: 'pageGrid' | 'fileGrid' | 'controls' | 'viewer' | 'block';
   count?: number;
   animated?: boolean;
+  width?: number | string;
+  height?: number | string;
+  radius?: number | string;
 }
 
-const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({ 
-  type, 
-  count = 8, 
-  animated = true 
+const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
+  type,
+  count = 8,
+  animated = true,
+  width,
+  height,
+  radius = 8,
 }) => {
   const animationStyle = animated ? { animation: 'pulse 2s infinite' } : {};
 
+  // Generic block skeleton for inline text/inputs/etc.
+  const renderBlock = () => (
+    <Box
+      w={typeof width === 'number' ? `${width}px` : width}
+      h={typeof height === 'number' ? `${height}px` : height}
+      bg="gray.1"
+      style={{
+        borderRadius: radius,
+        display: 'inline-block',
+        verticalAlign: 'middle',
+        ...animationStyle
+      }}
+    />
+  );
+
   const renderPageGridSkeleton = () => (
-    <div style={{ 
-      display: 'grid', 
-      gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', 
-      gap: '1rem' 
+    <div style={{
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
+      gap: '1rem'
     }}>
       {Array.from({ length: count }).map((_, i) => (
         <Box
@@ -26,7 +47,7 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
           w="100%"
           h={240}
           bg="gray.1"
-          style={{ 
+          style={{
             borderRadius: '8px',
             ...animationStyle,
             animationDelay: animated ? `${i * 0.1}s` : undefined
@@ -37,10 +58,10 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
   );
 
   const renderFileGridSkeleton = () => (
-    <div style={{ 
-      display: 'grid', 
-      gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', 
-      gap: '1rem' 
+    <div style={{
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+      gap: '1rem'
     }}>
       {Array.from({ length: count }).map((_, i) => (
         <Box
@@ -48,7 +69,7 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
           w="100%"
           h={280}
           bg="gray.1"
-          style={{ 
+          style={{
             borderRadius: '8px',
             ...animationStyle,
             animationDelay: animated ? `${i * 0.1}s` : undefined
@@ -76,18 +97,20 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
         <Box w={40} h={40} bg="gray.1" style={{ borderRadius: 4, ...animationStyle }} />
       </Group>
       {/* Main content skeleton */}
-      <Box 
-        flex={1} 
-        bg="gray.1" 
-        style={{ 
+      <Box
+        flex={1}
+        bg="gray.1"
+        style={{
           borderRadius: '8px',
-          ...animationStyle 
-        }} 
+          ...animationStyle
+        }}
       />
     </Stack>
   );
 
   switch (type) {
+    case 'block':
+      return renderBlock();
     case 'pageGrid':
       return renderPageGridSkeleton();
     case 'fileGrid':
@@ -101,4 +124,4 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
   }
 };
 
-export default SkeletonLoader;
\ No newline at end of file
+export default SkeletonLoader;
diff --git a/frontend/src/core/constants/links.ts b/frontend/src/core/constants/links.ts
new file mode 100644
index 000000000..c48ea04ab
--- /dev/null
+++ b/frontend/src/core/constants/links.ts
@@ -0,0 +1 @@
+export const devApiLink = "https://registry.scalar.com/@stirlingpdf/apis/stirling-pdf-processing-api/";
diff --git a/frontend/src/core/data/useTranslatedToolRegistry.tsx b/frontend/src/core/data/useTranslatedToolRegistry.tsx
index 0844b94d1..3208e4ef7 100644
--- a/frontend/src/core/data/useTranslatedToolRegistry.tsx
+++ b/frontend/src/core/data/useTranslatedToolRegistry.tsx
@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import LocalIcon from "@app/components/shared/LocalIcon";
 import { useTranslation } from "react-i18next";
+import { devApiLink } from "@app/constants/links";
 import SplitPdfPanel from "@app/tools/Split";
 import CompressPdfPanel from "@app/tools/Compress";
 import OCRPanel from "@app/tools/OCR";
@@ -784,7 +785,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         description: t("home.devApi.desc", "Link to API documentation"),
         categoryId: ToolCategoryId.ADVANCED_TOOLS,
         subcategoryId: SubcategoryId.DEVELOPER_TOOLS,
-        link: "https://stirlingpdf.io/swagger-ui/5.21.0/index.html",
+        link: devApiLink,
         synonyms: getSynonyms(t, "devApi"),
         supportsAutomate: false,
         automationSettings: null