@stoker-platform/web-app 0.5.117 → 0.5.119

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @stoker-platform/web-app
2
2
 
3
+ ## 0.5.119
4
+
5
+ ### Patch Changes
6
+
7
+ - fix: fix UI flicker when changing collection on mobile
8
+
9
+ ## 0.5.118
10
+
11
+ ### Patch Changes
12
+
13
+ - fix: delay navigation when closing sidebar
14
+
3
15
  ## 0.5.117
4
16
 
5
17
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stoker-platform/web-app",
3
- "version": "0.5.117",
3
+ "version": "0.5.119",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "scripts": {
@@ -1687,6 +1687,13 @@ function Collection({
1687
1687
  [recordTitle],
1688
1688
  )
1689
1689
 
1690
+ const [showCollection, setShowCollection] = useState(false)
1691
+ useEffect(() => {
1692
+ if (isInitialized) {
1693
+ setShowCollection(true)
1694
+ }
1695
+ }, [isInitialized])
1696
+
1690
1697
  if (!permissions.collections?.[labels.collection]) return null
1691
1698
 
1692
1699
  return (
@@ -2410,7 +2417,7 @@ function Collection({
2410
2417
  )}
2411
2418
  </div>
2412
2419
  </div>
2413
- {tab && isInitialized ? (
2420
+ {tab && showCollection ? (
2414
2421
  <>
2415
2422
  <TabsContent
2416
2423
  value="list"
@@ -2535,17 +2542,17 @@ function Collection({
2535
2542
  ) : (
2536
2543
  !relationList &&
2537
2544
  (tab === "list" ? (
2538
- <div className="py-2">
2539
- <Card className="h-[calc(100vh-250px)]"></Card>
2545
+ <div className="pb-2 pt-[88px] lg:py-2">
2546
+ <Card className="min-h-[calc(100vh-88px)] lg:min-h-full lg:h-[calc(100vh-250px)]"></Card>
2540
2547
  </div>
2541
2548
  ) : tab === "map" ? (
2542
- <div className="py-2">
2543
- <Card className="h-[calc(100vh-204px)]"></Card>
2549
+ <div className="pb-2 pt-[88px] lg:py-2">
2550
+ <Card className="min-h-[calc(100vh-88px)] lg:min-h-full lg:h-[calc(100vh-204px)]"></Card>
2544
2551
  </div>
2545
2552
  ) : (
2546
2553
  tab === "calendar" && (
2547
- <div className="py-2">
2548
- <Card className="h-[calc(100vh-186px)]"></Card>
2554
+ <div className="pb-2 pt-[44px] lg:py-2">
2555
+ <Card className="min-h-[calc(100vh-44px)] lg:min-h-full lg:h-[calc(100vh-204px)]"></Card>
2549
2556
  </div>
2550
2557
  )
2551
2558
  ))
package/src/Tenant.tsx CHANGED
@@ -60,6 +60,8 @@ import { getFunctions, httpsCallable } from "firebase/functions"
60
60
  import { getApp } from "firebase/app"
61
61
  import { useTheme } from "./components/theme-provider"
62
62
 
63
+ const MOBILE_SHEET_CLOSE_MS = 320
64
+
63
65
  function Tenant() {
64
66
  const [dialogContent, setDialogContent] = useDialog()
65
67
  const location = useLocation()
@@ -293,6 +295,16 @@ function Tenant() {
293
295
  [location.pathname, schema.collections],
294
296
  )
295
297
 
298
+ const navigateFromSidebar = useCallback(
299
+ (path: string) => {
300
+ setSidebarOpen(false)
301
+ window.setTimeout(() => {
302
+ runViewTransition(() => navigate(path))
303
+ }, MOBILE_SHEET_CLOSE_MS)
304
+ },
305
+ [navigate],
306
+ )
307
+
296
308
  const [mfaDialog, setMfaDialog] = useState<null | {
297
309
  secret: string
298
310
  totpUri: string
@@ -661,7 +673,7 @@ function Tenant() {
661
673
  ? "flex items-center gap-4 px-2.5 text-foreground"
662
674
  : "flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
663
675
  }
664
- onClick={() => runViewTransition(() => navigate("/"))}
676
+ onClick={() => navigateFromSidebar("/")}
665
677
  >
666
678
  <ChartBar className="h-5 w-5" />
667
679
  Dashboard
@@ -678,12 +690,9 @@ function Tenant() {
678
690
  ? cn(className, "text-foreground")
679
691
  : cn(className, "text-muted-foreground hover:text-foreground")
680
692
  }
681
- onClick={() => {
682
- setSidebarOpen(false)
683
- runViewTransition(() =>
684
- navigate(`/${group.collections[0].toLowerCase()}`),
685
- )
686
- }}
693
+ onClick={() =>
694
+ navigateFromSidebar(`/${group.collections[0].toLowerCase()}`)
695
+ }
687
696
  >
688
697
  {/* eslint-disable security/detect-object-injection */}
689
698
  {iconNames[group.collections[0]]
@@ -709,12 +718,7 @@ function Tenant() {
709
718
  "text-muted-foreground hover:text-foreground",
710
719
  )
711
720
  }
712
- onClick={() => {
713
- setSidebarOpen(false)
714
- runViewTransition(() =>
715
- navigate(`/${collection.toLowerCase()}`),
716
- )
717
- }}
721
+ onClick={() => navigateFromSidebar(`/${collection.toLowerCase()}`)}
718
722
  >
719
723
  {/* eslint-disable security/detect-object-injection */}
720
724
  {iconNames[collection]