@stoker-platform/web-app 0.5.125 → 0.5.127

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stoker-platform/web-app
 
+## 0.5.127
+
+### Patch Changes
+
+- fix: fix Dashboard background cutoff issue
+
+## 0.5.126
+
+### Patch Changes
+
+- fix: fix preload cache spinner issue
+
 ## 0.5.125
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.125",
+    "version": "0.5.127",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {

package/src/Collection.tsx

@@ -710,15 +710,15 @@ function Collection({
     const cacheLoading = useCallback(() => {
         if (!cacheLoadingStarted.current) {
             isCacheLoading.current = true
-            setIsRouteLoading("+", location.pathname)
+            setIsRouteLoading("+", location.pathname, true)
             cacheLoadingStarted.current = true
         }
-    }, [location, isCacheLoading.current, cacheLoadingStarted.current])
+    }, [location.pathname, setIsRouteLoading])
     const cacheLoaded = useCallback(() => {
         isCacheLoading.current = false
-        setIsRouteLoading("-", location.pathname)
+        setIsRouteLoading("-", location.pathname, true)
         setCacheLoadingCompleted(true)
-    }, [location, isCacheLoading.current])
+    }, [location.pathname, setIsRouteLoading])
 
     const hasRunSingleton = useRef(false)
 
@@ -727,7 +727,6 @@ function Collection({
             const isPreloading = getLoadingState()[labels.collection]
             if (!isPreloading || isPreloading === "Loading") {
                 cacheLoading()
-                cacheLoadingStarted.current = true
             }
             document.addEventListener(`stoker:loading:${labels.collection}`, cacheLoading)
             // Prevent UI flicker

package/src/Dashboard.tsx

@@ -62,7 +62,7 @@ export const Dashboard = () => {
                 <title>Dashboard</title>
                 <meta name="description" content={`Dashboard for ${appName}`} />
             </Helmet>
-            <div className="h-[100vh] xl:overflow-y-auto">
+            <div className="xl:h-[100vh] xl:overflow-y-auto">
                 <div className="flex flex-col lg:pt-4">
                     <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 py-1 lg:static lg:h-auto lg:border-0 lg:bg-transparent lg:px-6 lg:py-0 print:border-none select-none">
                         <Card className="flex items-center gap-2 h-12 sm:min-w-[300px] p-5">

package/src/providers/LoadingProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo, useState } from "react"
+import { createContext, useCallback, useContext, useRef, useState } from "react"
 import debounce from "lodash/debounce.js"
 import { serverReadOnly } from "@/utils/serverReadOnly"
 import { useLocation } from "react-router"
@@ -91,25 +91,33 @@ export const RouteLoadingProvider: React.FC<RouteLoadingProviderProps> = ({ chil
     const [isRouteLoading, setLoading] = useState<Set<string>>(new Set<string>())
     const [isRouteLoadingImmediate, setLoadingImmediate] = useState<Set<string>>(new Set<string>())
 
-    const setIsRouteLoadingDebounced = useMemo(() => {
-        const debouncedSet = debounce((operation: "+" | "-", route: string) => {
-            if (operation === "+") {
-                setLoading((prev) => {
-                    const newSet = new Set(prev)
-                    newSet.add(route)
-                    return newSet
-                })
-            } else {
-                setLoading((prev) => {
-                    const newSet = new Set(prev)
-                    newSet.delete(route)
-                    return newSet
-                })
-            }
-        }, 500)
+    const debouncedByRouteRef = useRef(new Map<string, ReturnType<typeof debounce>>())
 
-        return (operation: "+" | "-", route: string) => {
-            debouncedSet(operation, route)
+    const setIsRouteLoadingDebounced = useCallback((operation: "+" | "-", route: string) => {
+        let debounced = debouncedByRouteRef.current.get(route)
+        if (!debounced) {
+            debounced = debounce((op: "+" | "-") => {
+                if (op === "+") {
+                    setLoading((prev) => {
+                        const newSet = new Set(prev)
+                        newSet.add(route)
+                        return newSet
+                    })
+                } else {
+                    setLoading((prev) => {
+                        const newSet = new Set(prev)
+                        newSet.delete(route)
+                        return newSet
+                    })
+                }
+            }, 500)
+            debouncedByRouteRef.current.set(route, debounced)
+        }
+        debounced(operation)
+        if (operation === "-") {
+            debounced.flush()
+            debounced.cancel()
+            debouncedByRouteRef.current.delete(route)
         }
     }, [])
 
@@ -153,6 +161,8 @@ export const RouteLoadingProvider: React.FC<RouteLoadingProviderProps> = ({ chil
         // eslint-disable-next-line security/detect-object-injection
         const collection = schema.collections[collectionName]
         if ((collection && serverReadOnly(collection)) || immediate) {
+            debouncedByRouteRef.current.get(route)?.cancel()
+            debouncedByRouteRef.current.delete(route)
             setIsRouteLoadingImmediate(operation, route)
         } else {
             setIsRouteLoadingDebounced(operation, route)