Next.js Discord

Discord Forum

Loading Skeleton Does Not Show On Mobile

Unanswered
Korat posted this in #help-forum
Open in Discord
KoratOP
I've started a project using Next 14 and I thought it was working great, but for some reason the loading states using the loading.js file and then the Suspense boundaries for specific components, are not showing up at all on mobile. It's just a white screen until everything is available. I'll include all the code I can, but was wondering if anybody else has experienced this?

app/page.tsx 

import { Suspense } from "react";
import OrgChooser from "./_components/OrgChooser";
import OrgChooserSkeleton from "./_components/OrgChooserSkeleton";
import checkUserExists from "./_utils/checkUserExists";
export default async function Home() {
    const user = await checkUserExists();
    console.log("user", user);

    return (
        <div className="container">
            <div className="row">
                <div className="col-12">
                    <h3 className="mb-4">Hello {user?.firstName}</h3>
                    <Suspense fallback={<OrgChooserSkeleton />}>
                        <OrgChooser />
                    </Suspense>
                </div>
            </div>
        </div>
    );
}

I tried including the OrgChooser component code but it says my message is too long. I'll try to add that in a comment to this post.

7 Replies

KoratOP
app/_components/OrgChooser.tsx
import { currentUser } from "@clerk/nextjs";
import { getUserOrgs } from "../_data/users";
import { Org, Orgs } from "../_types/Orgs";
import Link from "next/link";
import { unstable_noStore as noStore } from "next/cache";
export default async function OrgChooser() {
    noStore();
    const user = await currentUser();
    if (user) {
        const formData = new FormData();
        formData.append("user_id", user.id);
        await new Promise((resolve) => setTimeout(resolve, 1500));
        const orgs: Orgs = await getUserOrgs(formData);

        // If there are no orgs, return a message
        if (orgs.rows.length === 0) {
            return (
                <div className="row">
                    <div className="col-12">
                        <p className="mb-1">
                            You are not associated with any organizations yet 😕
                        </p>
                    </div>
                </div>
            );
        }
        return (
            <div className="row">
                {orgs.rows.map((org: Org) => (
                    <Link
                        href="#"
                        key={org.org_id}
                        className="col-12 col-md-4 text-decoration-none"
                    >
                        <div
                            className="card shadow mb-3"
                            style={{ height: "250px" }}
                        >
                            <div className="card-body">
                                <div className="d-flex justify-content-center align-items-center h-100">
                                    <h5 className="card-title mb-0">
                                        {org.org_name}
                                    </h5>
                                </div>
                            </div>
                        </div>
                    </Link>
                ))}
            </div>
        );
    }
}
Any help on this topic would be greatly appreciated. I have no idea why this all works perfect on desktop, but on mobile and tablet devices it doesn't work at all.
Anay-208
Share the part of the code, where you're facing the issue
not the whole
and code of OrgChooserSkeleton
KoratOP
There's supposed to be a loading skeleton for the page.tsx and the OrgChooser.tsx so I thought I did share the part of the code where I'm facing the issue.

OrgChooserSkeleton
import styles from "./OrgChooserSkeleton.module.css";
export default async function OrgChooserSkeleton() {
    return (
        <div className="container">
            <div className="row">
                <div className="col-12 col-md-4">
                    <div
                        className={`card shadow mb-3 ${styles.loadingSkeleton}`}
                        style={{ height: "250px" }}
                    ></div>
                </div>
                <div className="col-12 col-md-4">
                    <div
                        className={`card shadow mb-3 ${styles.loadingSkeleton}`}
                        style={{ height: "250px" }}
                    ></div>
                </div>
                <div className="col-12 col-md-4">
                    <div
                        className={`card shadow mb-3 ${styles.loadingSkeleton}`}
                        style={{ height: "250px" }}
                    ></div>
                </div>
            </div>
        </div>
    );
}
css file OrgChooserSkeleton uses 
.loadingSkeleton {
    background-color: #7e7e7e;
    animation: pulse .75s infinite alternate;
}

@keyframes pulse {
    0% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}