feat(ui): unified tab-switch animation - enter-only fade in TabPanel
One 0.2s enter-only fade (opacity + 6px rise) in the kit TabPanel covers every tab switch (M3 clean-fade pattern; CSS animation so the global reduced-motion kill switch applies). Orders and Invoices view switchers now render through TabPanel (also fixes their dangling aria-controls). Removed the inconsistent bespoke framer entrances inside tab content (CompanySettings cascade, ReceivedInvoices card). Filter-style status tabs (Projects/Offers/Invoices) deliberately keep the refetch dim only. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -5,7 +5,14 @@ import Typography from "@mui/material/Typography";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import Forbidden from "../components/Forbidden";
|
||||
import { Button, Tabs, PageHeader, PageEnter, LoadingState } from "../ui";
|
||||
import {
|
||||
Button,
|
||||
Tabs,
|
||||
TabPanel,
|
||||
PageHeader,
|
||||
PageEnter,
|
||||
LoadingState,
|
||||
} from "../ui";
|
||||
import OrdersReceived from "./ReceivedOrders";
|
||||
|
||||
const IssuedOrders = lazy(() => import("./IssuedOrders"));
|
||||
@@ -170,18 +177,19 @@ export default function Orders() {
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{activeTab === "vydane" ? (
|
||||
<TabPanel value="vydane" current={activeTab} sx={{ pt: 0 }}>
|
||||
<Suspense fallback={<LoadingState />}>
|
||||
<IssuedOrders month={statsMonth} year={statsYear} />
|
||||
</Suspense>
|
||||
) : (
|
||||
</TabPanel>
|
||||
<TabPanel value="prijate" current={activeTab} sx={{ pt: 0 }}>
|
||||
<OrdersReceived
|
||||
month={statsMonth}
|
||||
year={statsYear}
|
||||
createOpen={createOpen}
|
||||
setCreateOpen={setCreateOpen}
|
||||
/>
|
||||
)}
|
||||
</TabPanel>
|
||||
</PageEnter>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user