admin: per-icon phosphor imports, the barrel loads every icon module under vitest

ci's frontend job timed out three page tests at 5s; the runner paid the barrel's ~1500 icon modules on first render. deep imports load only the icons the app uses; local test import time drops by a quarter.
This commit is contained in:
2026-08-31 18:51:43 +02:00
parent 2525b01893
commit 33862682d1
8 changed files with 13 additions and 8 deletions
@@ -1,4 +1,4 @@
import { ArrowLeft } from "@phosphor-icons/react";
import { ArrowLeft } from "@phosphor-icons/react/dist/icons/ArrowLeft";
import { useQuery } from "@tanstack/react-query";
import { Link, useParams, useSearch } from "@tanstack/react-router";
import * as stylex from "@stylexjs/stylex";
@@ -29,7 +29,7 @@
* would promise filtering that is not happening.
*/
import { MagnifyingGlass } from "@phosphor-icons/react";
import { MagnifyingGlass } from "@phosphor-icons/react/dist/icons/MagnifyingGlass";
import { useCallback, useEffect, useState, type FormEvent, type KeyboardEvent } from "react";
import * as stylex from "@stylexjs/stylex";
import { Button, Menu, MenuItem, MenuTrigger, Popover, Radio, RadioGroup } from "react-aria-components";
+3 -1
View File
@@ -22,7 +22,9 @@
* visible and removable either way.
*/
import { CaretDown, Check, X } from "@phosphor-icons/react";
import { CaretDown } from "@phosphor-icons/react/dist/icons/CaretDown";
import { Check } from "@phosphor-icons/react/dist/icons/Check";
import { X } from "@phosphor-icons/react/dist/icons/X";
import { useEffect, useMemo, useRef } from "react";
import * as stylex from "@stylexjs/stylex";
import { Button, Menu, MenuItem, MenuTrigger, Popover } from "react-aria-components";
@@ -1,5 +1,5 @@
import { useState } from "react";
import { ArrowLeft } from "@phosphor-icons/react";
import { ArrowLeft } from "@phosphor-icons/react/dist/icons/ArrowLeft";
import { useQuery } from "@tanstack/react-query";
import { Link, useParams } from "@tanstack/react-router";
import * as stylex from "@stylexjs/stylex";
@@ -1,5 +1,5 @@
import { useState } from "react";
import { ArrowLeft } from "@phosphor-icons/react";
import { ArrowLeft } from "@phosphor-icons/react/dist/icons/ArrowLeft";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Link, useNavigate, useParams } from "@tanstack/react-router";
import * as stylex from "@stylexjs/stylex";
@@ -16,7 +16,10 @@
*/
import type { ReactNode } from "react";
import { Circle, Pause, Warning, X } from "@phosphor-icons/react";
import { Circle } from "@phosphor-icons/react/dist/icons/Circle";
import { Pause } from "@phosphor-icons/react/dist/icons/Pause";
import { Warning } from "@phosphor-icons/react/dist/icons/Warning";
import { X } from "@phosphor-icons/react/dist/icons/X";
import { useQuery } from "@tanstack/react-query";
import { Link } from "@tanstack/react-router";
import * as stylex from "@stylexjs/stylex";
+1 -1
View File
@@ -11,7 +11,7 @@
*/
import type { ReactNode } from "react";
import { Check } from "@phosphor-icons/react";
import { Check } from "@phosphor-icons/react/dist/icons/Check";
import * as stylex from "@stylexjs/stylex";
import { Checkbox as AriaCheckbox } from "react-aria-components";
import { colors } from "./tokens.stylex";
+1 -1
View File
@@ -10,7 +10,7 @@
* models an id converts on both edges.
*/
import { CaretDown } from "@phosphor-icons/react";
import { CaretDown } from "@phosphor-icons/react/dist/icons/CaretDown";
import * as stylex from "@stylexjs/stylex";
import {
Button,