De-emphasize graceful degradation via removing degraded UI

content/ui-patterns/degraded-experiences.mdx

@@ -54,80 +54,18 @@ In addition to a global banner, we should inform users about availability issues
 
 ## Degraded page content
 
-If part of the UI cannot be rendered or would be rendered without critical information, default to not rendering it at all.
-
 Before making a decision about how to handle UI with unavailable content, check if it already has guidelines on handling errors or empty states.
 
-### Removing UI
-
-You can remove the affected UI if it's not critical to core workflows and it wouldn't be confusing to render the rest of the page without that UI. For example: it's ok to hide the reactions button.
-
-Examples of UI that might be disorienting to remove:
-
-- The comment box on issues and pull requests
-- The "Request changes" button in the pull request "Changes" tab
-- Submit buttons on forms
-
-<Box
-  mb={3}
-  display="flex"
-  alignItems="flex-start"
-  justifyContent="space-between"
-  flexDirection={['column', 'column', 'column', 'column', 'row']}
-  sx={{gap: 3}}
->
-
-<div>
-
-#### Handling unavailable counts
-
-When the data required to calculate a count is unavailable, default to hiding the number. If the count is shown inside of an interactive element, a tooltip may be displayed on focus and hover to explain the missing count.
-
-</div>
-
-<img
-  width="456"
-  alt="Two images of repo tabs: 1. Tabs have counts; 2. Tabs don't have counts;"
-  src="https://github.com/primer/design/assets/2313998/0f368a1d-78fa-4ec4-92ab-7f587fb93a7e"
-/>
-
-</Box>
-
-<Box
-  mb={3}
-  display="flex"
-  alignItems="flex-start"
-  justifyContent="space-between"
-  flexDirection={['column', 'column', 'column', 'column', 'row']}
-  sx={{gap: 3}}
->
-
-<div>
-
-#### Handling activity indicators
-
-When the data is unavailable to determine whether to show an activity indicator (most commonly used for notification badges), default to hiding the indicator.
-
-</div>
-
-<img
-  width="456"
-  alt="Image of the notification link button in the global nav without a badge"
-  src="https://github.com/primer/design/assets/2313998/4f39547c-749b-4e44-a15f-05d18a1dc0c1"
-/>
-
-</Box>
-
 ### Replacing UI with a message
 
+We don't want users to think they've suffered data loss. Instead of a generic "empty state, it is better to explain that it's unavailable, or remove the entire section from the page (including the section's heading). For example, as a user, I might think my repositories were deleted if I am on an organization page (like [https://github.com/primer/](https://github.com/primer/)) and the repositories aren't listed there.
+
 <img
   width="960"
   alt="A screenshot of the Primer organization page. The repositories list is replaced with a message informing the user that the repositories are temporarily unavailable."
   src="https://github.com/primer/design/assets/2313998/3a2ce19a-2699-483a-a967-5b2e7e3d86d8"
 />
 
-We don't want users to think they've suffered data loss. If we know a user created something, don't show a generic "empty state". It's better to explain that it's unavailable, or remove the entire section from the page (including the section's heading). For example, I might think my repositories were deleted if I'm on an organization page (like [https://github.com/primer/](https://github.com/primer/)) and the repositories aren't listed there.
-
 Ideally we can strike a balance and give the user just the right amount of context without overwhelming them with error messages. A page with too many error messages could communicate an unnecessarily reactionary and negative tone. As a general guideline, we suggest limiting pages to 5 or less outage messages.
 
 #### Inline content and smaller elements
@@ -193,6 +131,68 @@ If you're not using a component that supports error states, replace the content
   src="https://github.com/primer/design/assets/2313998/bde4367e-8881-41f5-9d06-a2ea5cd79fd6"
 />
 
+### Removing UI
+
+Be mindful when choosing to remove affected UI without explanation, as this could cause confusion for users about whether that part of the UI is hidden due to an error, or if it's been permanently removed.
+
+However, it is acceptable to remove UI that's not critical to core workflows and render the rest of the page without that UI. For example: choosing to hide unavailable activity indicators.
+
+Examples of UI that we do not recommend removing:
+
+- The comment box on issues and pull requests
+- The "Request changes" button in the pull request "Changes" tab
+- Submit buttons on forms
+
+<Box
+  mb={3}
+  display="flex"
+  alignItems="flex-start"
+  justifyContent="space-between"
+  flexDirection={['column', 'column', 'column', 'column', 'row']}
+  sx={{gap: 3}}
+>
+
+<div>
+
+#### Handling unavailable counts
+
+When the data required to calculate a count is unavailable, default to hiding the number. If the count is shown inside of an interactive element, a tooltip may be displayed on focus and hover to explain the missing count.
+
+</div>
+
+<img
+  width="456"
+  alt="Two images of repo tabs: 1. Tabs have counts; 2. Tabs don't have counts;"
+  src="https://github.com/primer/design/assets/2313998/0f368a1d-78fa-4ec4-92ab-7f587fb93a7e"
+/>
+
+</Box>
+
+<Box
+  mb={3}
+  display="flex"
+  alignItems="flex-start"
+  justifyContent="space-between"
+  flexDirection={['column', 'column', 'column', 'column', 'row']}
+  sx={{gap: 3}}
+>
+
+<div>
+
+#### Handling activity indicators
+
+When the data is unavailable to determine whether to show an activity indicator (most commonly used for notification badges), default to hiding the indicator.
+
+</div>
+
+<img
+  width="456"
+  alt="Image of the notification link button in the global nav without a badge"
+  src="https://github.com/primer/design/assets/2313998/4f39547c-749b-4e44-a15f-05d18a1dc0c1"
+/>
+
+</Box>
+
 ## Degraded navigation
 
 Some links can be static (for example, `https://github.com/`), but many links are made from dynamic data (for example: `https://github.com/{org}/{repo}/issues/{issue-number}`).