Loading Skeleton Does Not Show On Mobile

Unanswered

Korat posted this in #help-forum

KoratOP

2024-02-16T16:49:16.000Z

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

2024-02-16T16:50:39.000Z

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

2024-02-16T17:57:17.000Z

Share the part of the code, where you're facing the issue

not the whole

and code of OrgChooserSkeleton

KoratOP

2024-02-16T18:20:41.000Z

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;
    }
}