feat: Add global loading indicator to top nav #176
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
I noticed the GIF preview got a lil cut off the top. The actual bar is slightly taller ( |
gustavoguichard
force-pushed
the
gg/loading-indicator
branch
from
ab7399c to
dad1da4
Compare
brookslybrand
requested changes
Feb 5, 2024
There was a problem hiding this comment.
Thanks @gustavoguichard for taking this on! Mostly little suggestions/code nits
app/ui/global-loading.tsx
Outdated
| @@ -0,0 +1,42 @@ | |||
| import * as React from "react"; | |||
There was a problem hiding this comment.
Small nit: can we import the hooks from React. It's not a big thing, just trying to get more uniform into this codebase to that pattern
Suggested change
| import * as React from "react"; | |
| import { useRef, useState, useEffect } from "react"; |
|
@brophdawg11 since you added the suggestion I wanted to bring this to your attention in case you wanted to provide feedback |
|
@brookslybrand , applied the suggestions ;) |
takagimeow
pushed a commit
to takagimeow/remix-website
that referenced
this pull request
Feb 7, 2024
* feat: Add global loading indicator to top nav * chore: Apply some of Brook's suggestions to global-loading code
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
According to @brophdawg11 's suggestion and issue #163 , I added this POC to the
root.tsx.In the example below I added a
await sleep(2000)to the blog loaders and the theme switch action to see the complete animation and the places where the progressbar stops in both slow actions and loaders.This was taken from my blog post and I've been using this code successfully in almost all my Remix apps.
I appreciate any feedback if rejected and willing to make any modifications requested. ;)
I've chosen a gradient from
bg-blue-brandtobg-aqua-brandI think works good on both dark and light modes.Preview: