Fix stale data display after page edits/creation #25

Merged

Copilot merged 4 commits from copilot/improve-page-refresh-logic into main

2025-11-21 10:13:04 -06:00

Copilot commented

2025-11-21 09:47:46 -06:00

(Migrated from github.com)

Page content and listings weren't updating after edits or creation, requiring manual browser refresh.

Changes

PageView.jsx

Reset loading and error state at start of loadPage() to ensure fresh data fetch on navigation

Sidebar.jsx

Add useLocation hook to trigger page list reload on route changes
Reset loading state in loadPages() for consistency
Skip reload on initial mount to avoid double-fetch

Dashboard.jsx

Set loading state before fetch for proper UI feedback

Example

Before, navigating from /edit/my-page to /page/my-page would show stale content because state wasn't reset:

const loadPage = async () => {
  // Missing state reset - old data persists during fetch
  try {
    const response = await pages.getBySlug(slug);
    setPage(response.data);
  } finally {
    setLoading(false);
  }
};

After:

const loadPage = async () => {
  setLoading(true);  // Reset loading state
  setError('');      // Clear previous errors
  try {
    const response = await pages.getBySlug(slug);
    setPage(response.data);
  } finally {
    setLoading(false);
  }
};

Original prompt

After a page is added or edited, a refresh of the page is needed. Can we make it so that when changes are made, they are shown right away?

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Page content and listings weren't updating after edits or creation, requiring manual browser refresh. ## Changes **PageView.jsx** - Reset `loading` and `error` state at start of `loadPage()` to ensure fresh data fetch on navigation **Sidebar.jsx** - Add `useLocation` hook to trigger page list reload on route changes - Reset loading state in `loadPages()` for consistency - Skip reload on initial mount to avoid double-fetch **Dashboard.jsx** - Set loading state before fetch for proper UI feedback ## Example Before, navigating from `/edit/my-page` to `/page/my-page` would show stale content because state wasn't reset: ```javascript const loadPage = async () => { // Missing state reset - old data persists during fetch try { const response = await pages.getBySlug(slug); setPage(response.data); } finally { setLoading(false); } }; ``` After: ```javascript const loadPage = async () => { setLoading(true); // Reset loading state setError(''); // Clear previous errors try { const response = await pages.getBySlug(slug); setPage(response.data); } finally { setLoading(false); } }; ```  <details> <summary>Original prompt</summary> > After a page is added or edited, a refresh of the page is needed. Can we make it so that when changes are made, they are shown right away? </details>  --- 💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more [Copilot coding agent tips](https://gh.io/copilot-coding-agent-tips) in the docs.

SluberskiHomeLab (Migrated from github.com) reviewed

2025-11-21 09:47:46 -06:00