mirror of
https://github.com/jhd3197/ServerKit.git
synced 2026-11-09 05:24:49 +09:00
Juan DenisandClaude Opus 5
2ab1fd5e8c
load() never set loading back to true, so after the first paint the flag was
permanently false and three consumers were dead: the Refresh button's disabled,
its spin class, and the table's first-paint skeleton.
setLoading(true) alone -- the literal review comment -- does not fix the race
it was aimed at, and adds a small lie of its own. Two identical loads cannot
race: ApiService coalesces in-flight GETs by URL, and getErrorLogs folds every
param into the query string. What can race is a DIFFERENT-params overlap, and
those come from the SegControls and SearchField, which disabled={loading} does
not gate -- change a filter while a slow search is in flight and the older
response repaints the table with rows the toolbar no longer describes. With two
loads running, the first finally would also stop the spinner while the second
was still going.
So: a request-sequence token gating both the data commit and setLoading(false).
Same shape as the drawer's own stale-response check in openDetail a few lines
below, which already does this for the detail fetch in this very file.
`loading && entries.length === 0` on the table stays as it is -- entries is
only overwritten on success, so that guard is what stops Refresh blanking the
current page, and it becomes load-bearing now that loading actually toggles.
Unproven by test: the panel has no test runner for pages. eslint and the
production build are clean.
Reported by Copilot on the error-tracker PR.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
React Dashboard Template
A modern React dashboard application boilerplate built with Vite, featuring routing, charts, and a sidebar layout for building data-driven web interfaces.
Features
- React 18 with functional components and hooks
- Vite for fast development and building
- React Router for client-side routing
- Recharts for data visualization
- Lucide React for icons
- ESLint for code linting
- Responsive sidebar layout
- Dashboard page with sample components
Getting Started
Prerequisites
- Node.js 16+ and npm
Installation
- Clone or download this template
- Install dependencies:
npm install
Development
Start the development server:
npm run dev
The app will be available at http://localhost:41921.
Building for Production
Build the app for deployment:
npm run build
The output will be in the dist/ directory.
Preview Production Build
npm run preview
Project Structure
src/
├── App.jsx # Main app with routing
├── main.jsx # Entry point
├── index.css # Global styles
├── components/
│ └── Sidebar.jsx # Navigation sidebar
├── layouts/
│ └── DashboardLayout.jsx # Main layout wrapper
└── pages/
└── Dashboard.jsx # Main dashboard page
Customization
- Modify components in
src/components/ - Add new pages in
src/pages/ - Update routes in
App.jsx - Customize styles in
index.cssor component files
Environment Variables
Create a .env file in the root for environment variables:
VITE_API_URL=https://api.example.com
Access them in code via import.meta.env.VITE_API_URL.
Contributing
See the documentation files for AI agent permissions and guidelines.