@stoker-platform/web-app 0.5.124 → 0.5.126

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stoker-platform/web-app
 
+## 0.5.126
+
+### Patch Changes
+
+- fix: fix preload cache spinner issue
+
+## 0.5.125
+
+### Patch Changes
+
+- feat: improve mobile collection transitions
+
 ## 0.5.124
 
 ### Patch Changes

package/package.json

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

package/src/App.css

@@ -1,5 +1,11 @@
 html,
 body {
+    background-color: #ffffff !important;
+    background-image: none !important;
+}
+
+html[data-mode="app"],
+html[data-mode="app"] body {
     background-color: #000000 !important;
     background-image: none !important;
 }

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
@@ -1687,20 +1686,23 @@ function Collection({
         [recordTitle],
     )
 
-    const [showCollection, setShowCollection] = useState(window.innerWidth > 1280)
-    useEffect(() => {
-        if (isInitialized) {
-            setTimeout(() => {
-                setShowCollection(true)
-            }, 150)
-        }
-    }, [isInitialized])
+    const willHaveRangeRow = useMemo(() => {
+        return (
+            !formList &&
+            !relationList?.loadAll &&
+            tab !== "calendar" &&
+            (hasRangeFilter ||
+                (isPreloadCacheEnabled && !!preloadCache?.range) ||
+                filters.some((filter) => filter.type === "range") ||
+                (Array.isArray(collection.admin?.filters) &&
+                    collection.admin.filters.some((filter) => filter.type === "range")))
+        )
+    }, [formList, relationList, tab, hasRangeFilter, isPreloadCacheEnabled, filters, collection])
 
     if (!permissions.collections?.[labels.collection]) return null
 
     return (
-        !collection.singleton &&
-        showCollection && (
+        !collection.singleton && (
             <>
                 <div
                     ref={mainContentRef}
@@ -1826,7 +1828,9 @@ function Collection({
                             <Tabs defaultValue="list" onValueChange={onTabChange} value={tab}>
                                 <div
                                     className={cn(
-                                        "flex flex-col items-center print:hidden select-none",
+                                        "flex flex-col items-center justify-between print:hidden select-none",
+                                        willHaveRangeRow ? "h-[116px]" : "h-[72px]",
+                                        "lg:h-auto",
                                         relationList ? "xl:flex-row" : "lg:flex-row",
                                     )}
                                 >
@@ -2545,17 +2549,17 @@ function Collection({
                                 ) : (
                                     !relationList &&
                                     (tab === "list" ? (
-                                        <div className="pb-2 pt-[88px] lg:py-2">
-                                            <Card className="min-h-[calc(100vh-88px)] lg:min-h-full lg:h-[calc(100vh-250px)]"></Card>
+                                        <div className="py-2">
+                                            <Card className="min-h-screen lg:min-h-full lg:h-[calc(100vh-250px)]"></Card>
                                         </div>
                                     ) : tab === "map" ? (
-                                        <div className="pb-2 pt-[88px] lg:py-2">
-                                            <Card className="min-h-[calc(100vh-88px)] lg:min-h-full lg:h-[calc(100vh-204px)]"></Card>
+                                        <div className="py-2">
+                                            <Card className="min-h-screen lg:min-h-full lg:h-[calc(100vh-204px)]"></Card>
                                         </div>
                                     ) : (
                                         tab === "calendar" && (
-                                            <div className="pb-2 pt-[44px] lg:py-2">
-                                                <Card className="min-h-[calc(100vh-44px)] lg:min-h-full lg:h-[calc(100vh-204px)]"></Card>
+                                            <div className="py-2">
+                                                <Card className="min-h-screen lg:min-h-full lg:h-[calc(100vh-204px)]"></Card>
                                             </div>
                                         )
                                     ))

package/src/Tenant.tsx

@@ -60,7 +60,7 @@ import { getFunctions, httpsCallable } from "firebase/functions"
 import { getApp } from "firebase/app"
 import { useTheme } from "./components/theme-provider"
 
-const MOBILE_SHEET_CLOSE_MS = 400
+const MOBILE_SHEET_CLOSE_MS = 320
 
 function Tenant() {
     const [dialogContent, setDialogContent] = useDialog()
@@ -290,9 +290,9 @@ function Tenant() {
 
     const navigateFromSidebar = useCallback(
         (path: string) => {
-            runViewTransition(() => navigate(path))
+            setSidebarOpen(false)
             window.setTimeout(() => {
-                setSidebarOpen(false)
+                runViewTransition(() => navigate(path))
             }, MOBILE_SHEET_CLOSE_MS)
         },
         [navigate],

package/src/main.tsx

@@ -89,6 +89,15 @@ function Main() {
     const [, setDialogContent] = useDialog()
     const { toast } = useToast()
 
+    useEffect(() => {
+        const root = document.documentElement
+        if (mode === "app" && !maintenance) {
+            root.dataset.mode = "app"
+        } else {
+            delete root.dataset.mode
+        }
+    }, [mode, maintenance])
+
     useEffect(() => {
         if (mode === "maintenance") return
         const getRoutes = () => {

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)