[PR #208] [MERGED] improved loading state for /document/id #794

Closed
opened 2026-02-26 18:48:57 +03:00 by kerem · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/documenso/documenso/pull/208
Author: @doug-andrade
Created: 6/14/2023
Status: Merged
Merged: 6/15/2023
Merged by: @Mythie

Base: feat/refreshHead: refesh/document-loading


📝 Commits (1)

  • e0e2f3e improved loading state for /document/id

📊 Changes

4 files changed (+33 additions, -5 deletions)

View changed files

apps/web/src/app/(dashboard)/documents/[id]/loading.tsx (+28 -0)
📝 apps/web/src/app/(dashboard)/documents/[id]/page.tsx (+1 -1)
📝 apps/web/src/components/(dashboard)/pdf-viewer/pdf-viewer.tsx (+3 -3)
📝 apps/web/src/components/forms/edit-document.tsx (+1 -1)

📄 Description

Added a loading.tsx to /documents/[id]

Instant Loading States
An instant loading state is fallback UI that is shown immediately upon navigation. You can pre-render loading indicators such as skeletons and spinners, or a small but meaningful part of future screens such as a cover photo, title, etc. This helps users understand the app is responding and provides a better user experience.

I styled it so that it would flow seamlessly into the other loading client side loading states provided by edit-documents.tsx and pdf-viewer.tsx

Video:

https://www.loom.com/share/e9ff4de4fb6647ffa1d04986d57cfd38?sid=a5cd2fe2-a7ee-4a58-a1c9-7d31562d120f

Minor Fix:

The back link on the /documents/[id] page had a text of Dashboard even though it led to /documents The link text was changed to Documents for clarity.

Build Output:

web % npm run build

> @documenso/web@0.1.0 build
> next build

...
...
...

Route (app)                                Size     First Load JS
┌ ○ /                                      135 B          77.6 kB
├ λ /dashboard                             0 B                0 B
├ λ /documents                             0 B                0 B
├ λ /documents/[id]                        0 B                0 B
├ λ /settings                              0 B                0 B
├ λ /settings/billing                      0 B                0 B
├ λ /settings/password                     0 B                0 B
├ λ /settings/profile                      0 B                0 B
├ ○ /signin                                0 B                0 B
└ ○ /signup                                0 B                0 B
+ First Load JS shared by all              77.5 kB
  ├ chunks/7fd0f9f1-3fb3dc3e14815666.js    50.5 kB
  ├ chunks/9-cf592fc7a319a8e7.js           24.4 kB
  ├ chunks/main-app-9a6c377ca6c4fdfa.js    211 B
  └ chunks/webpack-d4c2325dbbeb6494.js     2.33 kB

Route (pages)                              Size     First Load JS
┌ ○ /404                                   178 B          86.7 kB
├ λ /api/auth/[...nextauth]                0 B            86.5 kB
├ λ /api/claim-plan                        0 B            86.5 kB
├ λ /api/document/create                   0 B            86.5 kB
├ λ /api/stripe/webhook                    0 B            86.5 kB
└ λ /api/trpc/[trpc]                       0 B            86.5 kB
+ First Load JS shared by all              86.5 kB
  ├ chunks/main-c32231f5001c0b96.js        84 kB
  ├ chunks/pages/_app-415a5670032b79f5.js  190 B
  └ chunks/webpack-d4c2325dbbeb6494.js     2.33 kB

ƒ Middleware                               22.9 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)(Static)  automatically rendered as static HTML (uses no initial props)

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/documenso/documenso/pull/208 **Author:** [@doug-andrade](https://github.com/doug-andrade) **Created:** 6/14/2023 **Status:** ✅ Merged **Merged:** 6/15/2023 **Merged by:** [@Mythie](https://github.com/Mythie) **Base:** `feat/refresh` ← **Head:** `refesh/document-loading` --- ### 📝 Commits (1) - [`e0e2f3e`](https://github.com/documenso/documenso/commit/e0e2f3e4400232b6a3284cfeab7e29009ef8078e) improved loading state for /document/id ### 📊 Changes **4 files changed** (+33 additions, -5 deletions) <details> <summary>View changed files</summary> ➕ `apps/web/src/app/(dashboard)/documents/[id]/loading.tsx` (+28 -0) 📝 `apps/web/src/app/(dashboard)/documents/[id]/page.tsx` (+1 -1) 📝 `apps/web/src/components/(dashboard)/pdf-viewer/pdf-viewer.tsx` (+3 -3) 📝 `apps/web/src/components/forms/edit-document.tsx` (+1 -1) </details> ### 📄 Description Added a `loading.tsx` to `/documents/[id]` >[**Instant Loading States**](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#instant-loading-states) An instant loading state is fallback UI that is shown immediately upon navigation. You can pre-render loading indicators such as skeletons and spinners, or a small but meaningful part of future screens such as a cover photo, title, etc. This helps users understand the app is responding and provides a better user experience. I styled it so that it would flow seamlessly into the other loading client side loading states provided by `edit-documents.tsx` and `pdf-viewer.tsx` ### **Video:** https://www.loom.com/share/e9ff4de4fb6647ffa1d04986d57cfd38?sid=a5cd2fe2-a7ee-4a58-a1c9-7d31562d120f ### **Minor Fix:** The back link on the `/documents/[id]` page had a text of `Dashboard` even though it led to `/documents` The link text was changed to `Documents` for clarity. ### **Build Output:** ```bash web % npm run build > @documenso/web@0.1.0 build > next build ... ... ... Route (app) Size First Load JS ┌ ○ / 135 B 77.6 kB ├ λ /dashboard 0 B 0 B ├ λ /documents 0 B 0 B ├ λ /documents/[id] 0 B 0 B ├ λ /settings 0 B 0 B ├ λ /settings/billing 0 B 0 B ├ λ /settings/password 0 B 0 B ├ λ /settings/profile 0 B 0 B ├ ○ /signin 0 B 0 B └ ○ /signup 0 B 0 B + First Load JS shared by all 77.5 kB ├ chunks/7fd0f9f1-3fb3dc3e14815666.js 50.5 kB ├ chunks/9-cf592fc7a319a8e7.js 24.4 kB ├ chunks/main-app-9a6c377ca6c4fdfa.js 211 B └ chunks/webpack-d4c2325dbbeb6494.js 2.33 kB Route (pages) Size First Load JS ┌ ○ /404 178 B 86.7 kB ├ λ /api/auth/[...nextauth] 0 B 86.5 kB ├ λ /api/claim-plan 0 B 86.5 kB ├ λ /api/document/create 0 B 86.5 kB ├ λ /api/stripe/webhook 0 B 86.5 kB └ λ /api/trpc/[trpc] 0 B 86.5 kB + First Load JS shared by all 86.5 kB ├ chunks/main-c32231f5001c0b96.js 84 kB ├ chunks/pages/_app-415a5670032b79f5.js 190 B └ chunks/webpack-d4c2325dbbeb6494.js 2.33 kB ƒ Middleware 22.9 kB λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps) ○ (Static) automatically rendered as static HTML (uses no initial props) ``` --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
kerem 2026-02-26 18:48:57 +03:00
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/documenso#794
No description provided.